@import url("helpers/fonts.d3e6cb6309f8.css");

body {
  background: #f3f3f3;
}

a {
  color: #05396b;
}

p {
  margin-bottom: 0px !important;
}

.box {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.box-standalone {
  margin-top: 2.5rem;
}

/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.dontdisplay {
  display: none;
}


hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.custom-85-width {
  max-width: 85%;
}

.custom-100-width {
  max-width: 100%;
}

.jSignature {
  border: 1px solid !important;
}

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* #150: one shared normal-flow sticky footer for every shell (authenticated and
   public). The page is a flex column at least as tall as the viewport; the footer
   is the last in-flow child and margin-top:auto pushes it to the bottom on short
   pages while letting tall pages simply grow past it. This replaces the old
   absolute footer + fixed padding-bottom:6rem reservation, which tall content
   could out-grow so the footer overlapped it. body keeps position:relative so any
   body-relative absolute descendant is unaffected. */
body {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* #150: a single, stable gap between the page content and the footer, defined
   once here instead of per-page ad-hoc spacers. */
body > .container {
  margin-bottom: 2rem;
}


.footer {
  position: static;
  margin-top: auto;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

.willkommen {
  margin-top: 30px;
}

.first-steps {
  margin-top: 30px;
}

.dashboard-general {
  margin-top: 30px;
}

.dashboard-uebersicht {
  margin-bottom: 30px;
}

.dashboard-gemeinde-stats {
  margin-bottom: 10px;
}

.dashboard-standardtext {
  font-size: 12px;
}

.copybutton {
  margin-left: 10px;
  font-size: 12px;
  padding: 6px 10px;
  min-height: 32px;
}

body {
  font-family: 'Montserrat', Arial;
  font-weight: 300;
  font-size: 14px;
}

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1500px;
  }
}

.mb-1, .my-1 {
  margin-bottom: 35px !important;
}

h1 {
  font-size: 32px;
  margin-bottom: 15px;
}

h2 {
  font-size: 25px;
  margin-bottom: 15px;
}

h3 {
  font-size: 20px;
  margin-bottom: 5px;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
  display: none;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
  display: none;
}

.bg-light {
  background-color: #05396b !important;
}

.navbar-brand {
  color: #fff !important;
}

.navbar-light .navbar-nav .nav-link {
  color: #fff !important;
}

.footer {
  background-color: #adb5bd !important;
}

.footer a {
  color: #fff !important;
  font-weight: 300 !important;
}

.footer .text-center {
  color: #fff !important;
  font-weight: 300 !important;
}

.btn-success {
  background-color: #04726d !important;
  color: #fff !important;
  font-weight: 300 !important;
}

.btn-primary {
  background-color: #04726d !important;
  border-color: #04726d !important;
  color: #fff !important;
  font-weight: 300 !important;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #05396b;
  border-color: #05396b;
}

.btn-sm {
  font-weight: 300 !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  min-height: 32px;
}

.dashboard-general {
  margin-top: 50px;
  margin-bottom: 50px;
}

.dashboard-number {
  font-size: 50px;
}

.dashboard-day {
  font-size: 12px;
}

.attention {
  padding: 20px;
  color: #dc3545;
  border: 1px solid #dc3545;
}

.alert {
  padding: 20px;
  color: #000;
  border: 1px solid #000;
}

.card-header {
  background-color: #04726d !important;
  color: #fff !important;
}

.card {
  margin-top: 25px;
}

.navbar-light .navbar-toggler-icon {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.navbar-light .navbar-toggler {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

.table td {
  padding: 0.75rem 0.75rem 0.75rem 0;
}

@media only screen and (max-width: 767px) {
  /* Legacy stacked layout for form-style tables (e.g. the guest
     additional-visitor form in new_entry.html). Data tables opt out below. */
  .table td {
    padding: 0.75rem 0;
    display: block;
  }

  /* Horizontally-scrollable data tables keep real table semantics so no column
     collapses to character width. Covers .table-responsive wrappers and
     DataTables (incl. scrollX head/body tables); identical head+body padding
     keeps scrollX columns aligned. */
  .table-responsive table.table > thead > tr > th,
  .table-responsive table.table > tbody > tr > td,
  .table-responsive table.table > tbody > tr > th,
  .table-responsive table.table > tfoot > tr > td,
  .table-responsive table.table > tfoot > tr > th,
  .dataTables_wrapper table.dataTable > thead > tr > th,
  .dataTables_wrapper table.dataTable > tbody > tr > td,
  .dataTables_wrapper table.dataTable > tbody > tr > th {
    display: table-cell;
    white-space: nowrap;
    padding: 0.6rem 1rem 0.6rem 0;
  }
  /* #186: the shared statistics totals row lives in a <tfoot> inside a
     .table-responsive wrapper. Without the tfoot rule above it inherited the
     legacy `.table td { display:block }` stacking, so at 390px the "Summe"
     values stacked vertically out of the column grid instead of staying under
     their columns in the inner horizontal-scroll area. No column/value is
     hidden and no page is widened. */

  /* Responsive pagination on phones: reduced number count comes from DataTables
     `numbers_length` (datatables-defaults.js); these rules only let the short
     pager wrap and centre so Zurück/Weiter and the page numbers never overflow
     or clip. Tablet/desktop keep the default single-line pager. */
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
    padding-top: 0.25rem;
  }

  .dataTables_wrapper .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0;
  }

  .dataTables_wrapper .dataTables_paginate .page-link,
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.4rem 0.65rem;
  }
}

@media only screen and (max-width: 500px) {
  .jSignature {
    width: 320px !important;
  }

  /* Collapsed navbar submenu renders inline (static, unclipped) on phones, but
     must still respect its caret toggle: only show when Bootstrap marks it
     .show. Previously it was force-`display:block`, so a submenu (Aktiv/Storniert)
     stayed visible after the caret was closed even though aria-expanded=false
     (QA F-006). Table/content action dropdowns stay real toggles. */
  .navbar-nav .dropdown-menu {
    position: static;
    float: none;
  }
  .navbar-nav .dropdown-menu.show {
    display: block;
  }

  #div_id_additionalvisitor_set-0-DELETE {
    display: none;
  }
}

@media only screen and (max-width: 320px) {
  .jSignature {
    width: 319px !important;
  }
}

@media only screen and (min-width: 510px) {
  .guest-smaller {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .border-dash {
    border-right: 1px solid #acabab;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
  }
}


@media only screen and (max-width: 767px) {
  .box {
    padding: 1rem;
  }

  .box-standalone {
    margin-top: 1rem;
  }
}

.custom-control-label::before {
  top: 2px;
}

.col-logo {
  text-align: right;
}

.col-logo img:first-of-type {
  width: 85px;
  margin-right: 1rem;
}

.col-logo img:last-of-type {
  width: 96px
}

.arrow-icon {
  padding-left: 7px;
}

@import url("/helpers/spacing.css");

.btn-no-share {
  position: relative;
}

.btn-no-share:before {
  content: "";
  border-bottom: 1px solid white;
  width: 30px;
  height: 2px;
  position: absolute;
  transform: rotate(-45deg);
  top: auto;
  left: 5px;
  bottom: 17px;
}

#s_color_picker_id .picker_wrapper {
  margin: 0 -0.5em;
  margin-bottom: 0.5rem;
  background: white;
  border: 0;
  box-shadow: none;
}

.picker_editor, .picker_sample, .picker_done {
  display: none;
}
/* ============================================================
   Sprint 016: remove remaining responsive full-page overflow and
   add a clear focus state on inputs (esp. login). Desktop unchanged.
   ============================================================ */
body {
  overflow-x: hidden;
  max-width: 100%;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #05396b;
  box-shadow: 0 0 0 0.2rem rgba(5, 57, 107, 0.25);
  outline: none;
}

@media only screen and (max-width: 767px) {
  .form-control,
  select,
  input,
  textarea {
    max-width: 100%;
  }

  .dataTables_wrapper {
    max-width: 100%;
  }

  .dataTables_wrapper .dataTables_scrollHead {
    overflow: hidden !important;
  }
}


/* -------------------------------------------------------------------------
   QA-002 (Sprint 017): coordinate the fixed cookie banner and the chat
   launcher with page content so they never permanently hide form fields or the
   submit button — especially on small (390x844) viewports.
   ------------------------------------------------------------------------- */
.cookiealert {
  z-index: 2050; /* above page content, below Bootstrap modals (2050+) */
}

@media only screen and (max-width: 576px) {
  .cookiealert {
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    line-height: 1.3;
  }
}

/* While the banner is shown (Wruczek adds .show), reserve bottom space so the
   last form actions can be scrolled clear of the banner and the bottom-right
   chat launcher. Degrades gracefully where :has() is unsupported. */
body:has(.cookiealert.show) {
  padding-bottom: 150px;
}

@media only screen and (max-width: 576px) {
  body:has(.cookiealert.show) {
    padding-bottom: 190px;
  }
}

/* -------------------------------------------------------------------------
   Shared guest-sheet status chips (Sprint 017 UI harmonisation, §6 / QA-017).
   Austria and Global render the Aktiv/Abgeschlossen/Storniert status with the
   same component and palette. Also defined inline on the Global list for older
   cached templates; identical values, so there is no conflict.
   ------------------------------------------------------------------------- */
.status-badge { font-size: .78rem; padding: .3em .6em; }
.status-open { background: #e7f1ff; color: #05396b; border: 1px solid #b6d4fe; }
.status-closed { background: #d2f1ba; color: #1e5631; border: 1px solid #b4e197; }
.status-cancelled { background: #eea6b0; color: #7d1420; border: 1px solid #e58a97; }

/* -------------------------------------------------------------------------
   Shared guest-sheet LIST toolbar + action controls (Sprint 020 parity).
   Austria and Global both render #entry_table with the same object-filter
   <select> toolbar and the same "quick action icon + Aktionen dropdown"
   controls (a mobile kebab replaces the label on phones). Previously the
   Austria rules were inline on its list and Global used its own pill-chip
   toolbar; both jurisdictions now share this one source.
   ------------------------------------------------------------------------- */
.entry-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}
.entry-toolbar .filter-group { display: flex; flex-direction: column; }
.entry-toolbar label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #05396b;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.entry-toolbar select {
  min-width: 220px;
  max-width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background-color: #fff;
  color: #05396b;
}
.entry-toolbar select:focus {
  outline: none;
  border-color: #04726d;
  box-shadow: 0 0 0 2px rgba(4, 114, 109, 0.2);
}
table.dataTable thead th { color: #05396b; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #05396b !important;
  border-color: #05396b !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #04726d !important;
  border-color: #04726d !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: #04726d;
}
#entry_table td, #entry_table th, #vo_table td, #vo_table th { vertical-align: middle; }
/* Action-control cluster used on every list (guest sheets AND objects, Austria
   and Global): a quick-action button + a labelled "Aktionen" dropdown that
   collapses to a kebab on phones. Scoped to .entry-actions (not a table id) so
   any list table can reuse it. */
.entry-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
/* POST actions rendered as dropdown items (Global close/cancel/toggle) look
   identical to Austria's <a> dropdown items. */
.entry-actions .dropdown-item.as-form { padding: 0; }
.entry-actions .dropdown-item.as-form button {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: .25rem 1.5rem;
  box-sizing: border-box;
}
.entry-actions .dropdown-item.as-form button:hover { background: #f8f9fa; }
/* The kebab icon is desktop-hidden; the word "Aktionen" is shown. */
.entry-actions .action-kebab { display: none; }
@media (max-width: 575.98px) {
  .entry-actions .action-label { display: none; }
  .entry-actions .action-kebab { display: inline-flex; }
  .entry-actions .btn { padding: 0.25rem 0.4rem; line-height: 1; }
  .entry-actions .dropdown-toggle::after { display: none; }
  .entry-actions .dropdown-menu { right: 0; left: auto; }

  /* HOTFIX: the collapsed kebab measured 20x29 CSS px — far below a reliable
     touch target, which is why the action menu "sometimes did not react" on a
     phone. Give it the standard 44x44 minimum and centre the glyph; the button
     keeps its small padding, the box just cannot shrink below the target. */
  .entry-actions .btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* HOTFIX: Bootstrap's `.dropdown-item` is `white-space: nowrap`, so the long
     labels ("Stammgast-Link kopieren") rendered 311px wide inside a 265px menu
     — the text ran out past the menu's white panel, which is what made the open
     menu look like a detached oversized block. Let the labels wrap, keep the
     panel inside the viewport, and give each entry a comfortable tap height. */
  /* A definite width, not shrink-to-fit: project.js pins the menu with
     `position: fixed`, so an `auto` width collapses to whatever space happens
     to be right of the pin point and the labels then spill out of the panel. */
  .entry-actions .dropdown-menu {
    width: 16rem;
    max-width: calc(100vw - 1rem);
  }
  /* The project resets box-sizing via `* { box-sizing: inherit }`, and these
     items end up inheriting `content-box`, so Bootstrap's 1.5rem left/right
     padding was ADDED to the panel width — every label overhung the menu by
     48px. Pin them to border-box so they stay inside the panel. */
  .entry-actions .dropdown-item {
    box-sizing: border-box;
    white-space: normal;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .entry-actions .dropdown-item.as-form { padding: 0; }
  .entry-actions .dropdown-item.as-form button { min-height: 44px; }
}

/* -------------------------------------------------------------------------
   QA hotfix: the Aktion column must be reachable without sideways scrolling.

   `ibindoListTableLayout()` (datatables-defaults.js) now uses DataTables
   Responsive for every width below Bootstrap's lg breakpoint, so the wide
   guest-sheet tables collapse into child rows on phones AND tablets instead of
   parking the Aktion column outside a horizontally scrolling box.

   Responsive can only do that if it can MEASURE that the full table is wider
   than the viewport: it hides low-priority columns until the ones it must keep
   ("Name"/"Aktion", `className: "all"`) fit. That measurement is the table's
   min-content width — the sum of each cell's longest unbreakable run.

   The mobile rule further up forces `white-space: nowrap` on every DataTables
   cell — correct for a scrollX table, wrong for a Responsive one, where an
   unbreakable name would push the action cluster past the right edge. So inside
   a Responsive table (DataTables adds `.dtr-inline`) cells must be allowed to
   wrap. But they must wrap on WORD boundaries only. `overflow-wrap: anywhere`
   and `word-break: break-word` collapse a cell's min-content to a single
   character, so DataTables measured every table as "already fitting 390px",
   collapsed no column, and instead squeezed all 8-11 columns into the phone
   width — the reported #146 damage: every heading and value broken
   letter-by-letter, stacked vertically down the screen. `overflow-wrap:
   break-word` (NOT `anywhere`) with `word-break: normal` keeps the min-content
   at the longest word, so the column collapse still triggers, while a genuinely
   over-long single token still breaks as a last resort instead of overflowing
   the card. Desktop (>=992px, scrollX) is untouched.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 991.98px) {
  table.dataTable.dtr-inline {
    max-width: 100%;
    table-layout: auto;
  }

  /* Wrap on word boundaries only. `word-break: normal` + `overflow-wrap:
     break-word` preserve each cell's min-content (its longest word), which is
     exactly what DataTables Responsive measures to decide a column must collapse
     into the child row instead of being crushed to character width at 390px. */
  table.dataTable.dtr-inline > thead > tr > th,
  table.dataTable.dtr-inline > tbody > tr > td,
  table.dataTable.dtr-inline > tbody > tr > th {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* The action cluster itself must never wrap mid-cluster (the buttons stay on
     one line) but the cell it lives in may be as narrow as the cluster. */
  table.dataTable.dtr-inline .entry-actions {
    white-space: nowrap;
  }

  /* Expanded child row: label/value pairs wrap on word boundaries; a genuinely
     over-long token still breaks (last resort) instead of widening the table,
     but normal text is never broken letter-by-letter. */
  table.dataTable.dtr-inline > tbody > tr > td.child ul.dtr-details,
  table.dataTable.dtr-inline > tbody > tr > td.child li,
  table.dataTable.dtr-inline > tbody > tr > td.child .dtr-data {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* The action menu is right-anchored across the whole Responsive range, not
     just on phones. Without a `.dataTables_scrollBody` there is nothing for
     project.js to pin the menu to, so Bootstrap's own left-aligned placement
     applies — and on a 768px tablet that put a 265px menu ~67px past the right
     viewport edge. `data-display="static"` on the toggle keeps Popper out of
     the way, so this is the placement that actually wins. */
  .entry-actions .dropdown-menu {
    right: 0;
    left: auto;
    max-width: calc(100vw - 1rem);
  }
}

/* HOTFIX: the object <select> is sized by its longest option ("Ferienwohnung
   Panoramablick Obergeschoss Süd in 1010 Wien"). `.filter-group` is a flex item
   with the default `min-width: auto`, so it refused to shrink and the control
   measured 505px inside a 390px viewport — the right-hand part of the filter,
   including the drop-down arrow, sat outside the content area and was only
   hidden by the root `overflow-x: hidden`. Letting the group shrink (and
   filling the row on phones) keeps the toolbar inside the card at every width. */
.entry-toolbar .filter-group {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  .entry-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .entry-toolbar select {
    width: 100%;
    min-width: 0;
  }
}

/* -------------------------------------------------------------------------
   #147: guest-sheet action buttons must stay a reliable >= 44x44 touch target
   across the WHOLE responsive/tablet range, not only on phones.

   The phone block above (<= 575.98px) already gives the .entry-actions cluster
   a 44x44 minimum. This minimum was first extended to Bootstrap's lg breakpoint
   (991px) because the wide lists run in DataTables Responsive mode below lg --
   the DEV browser gate (run 30705446207) measured a button at 31.015625 x 38 px
   on Austria/iPad portrait (768px), below the 44x44 minimum.

   A follow-up DEV browser gate (run 30706129521) then found the SAME defect one
   band higher: at 1024px (iPad landscape) the lists are already back in the
   non-responsive scrollX layout, but the icon-only quick action still kept
   Bootstrap's native size and measured 26 x 38 px -- again below 44x44. So the
   minimum must reach past lg, up to Bootstrap's xl breakpoint (1200px). That
   also matches the tablet navigation layout, which stays collapsed up to
   1200px. Use `max-width: 1199.98px` so the whole 576-1199px band is covered.

   Extend the minimum to every VISIBLE .entry-actions button (quick action +
   Aktionen toggle) and to the open menu's rows across the whole tablet band.
   Desktop (>= 1200px, e.g. the 1440px reference) keeps Bootstrap's native size.
   Only a minimum box is enforced -- icons, labels, tooltips, routes and the
   dropdown/POST actions are unchanged. Guest sheets only (Austria + Global);
   the object-list `.object-actions` cluster is a separate, out-of-scope control.
   ------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .entry-actions .btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* The open menu's rows are touch targets too once the dropdown is expanded. */
  .entry-actions .dropdown-item {
    min-height: 44px;
  }
  .entry-actions .dropdown-item.as-form button {
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------------
   Shared OBJECT-list action cluster (Sprint 024.02, §6).
   Austria and Global render the same icon buttons for an object row, but on
   Global they stacked vertically: the Aktionen column is the last of eight, so
   the browser wrapped the inline <a> buttons one per line and inflated the row
   height. Both jurisdictions now use this one flex cluster — same size, same
   gaps, same order, no wrapping on desktop — and it degrades in a controlled
   way on phones instead of overflowing the page.
   ------------------------------------------------------------------------- */
.object-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  white-space: nowrap;
}
.object-actions > .btn,
.object-actions > form > .btn {
  flex: 0 0 auto;
  margin: 0;
}
/* A POST action (e.g. activate/deactivate) sits in its own <form>; it must line
   up with the plain link buttons instead of introducing a block-level break. */
.object-actions > form {
  display: inline-flex;
  margin: 0;
}
@media (max-width: 575.98px) {
  /* Phones: keep every button fully visible and tappable (44px target) rather
     than clipping the column. Wrapping is allowed here — but as a controlled
     wrap inside the cell, never as a page-level horizontal overflow. */
  .object-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .object-actions > .btn,
  .object-actions > form > .btn {
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   Sprint 024 (F-004): no page-wide horizontal overflow on mobile.
   Wide data tables scroll INSIDE their own container; the page root
   never widens past the viewport. Long links/e-mails wrap instead of
   forcing the document wider. Desktop unchanged.
   ============================================================ */
html {
  overflow-x: hidden;
  max-width: 100%;
}

@media only screen and (max-width: 767px) {
  .container,
  .container-fluid {
    max-width: 100%;
  }

  .dataTables_wrapper,
  .dataTables_scroll,
  .dataTables_scrollHead,
  .dataTables_scrollHeadInner,
  .dataTables_scrollBody {
    max-width: 100%;
  }

  .dataTables_scrollBody {
    overflow-x: auto;
  }

  a,
  p,
  .alert,
  .value,
  .detail-value,
  .box {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* ============================================================
   QA-UI-004: complete the mobile (390px) responsive pass for Global.
   Charts, maps and any embedded media stay within the viewport instead of
   forcing the page wider (which the root overflow-x:hidden would otherwise
   merely clip). Every wide table lives in a real scroll container. Desktop
   (>=1200px, verified 1440x900) is untouched — these rules are phone-scoped.
   ============================================================ */
img,
svg,
canvas,
iframe,
embed,
video {
  max-width: 100%;
}

@media only screen and (max-width: 767px) {
  #stat-chart,
  #charts-container,
  #maps-container,
  .highcharts-container,
  .highcharts-root {
    max-width: 100% !important;
    width: 100% !important;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .jSignature,
  #signature,
  .signature-wrapper canvas {
    max-width: 100% !important;
  }
}


/* -------------------------------------------------------------------------
   #142 (public Austria guest sheet): keep the submit/DSGVO closing block and
   the FAQ/imprint block decoupled at every breakpoint (390/768/1024/1440 px).

   The FAQ block is now its own grid column (.entry-faq) instead of a raw
   flex-sibling of the crispy form column, so it already carries proper Bootstrap
   gutters and can never ride up under the "Absenden" button. These rules only
   add a clear visual separation above it and make sure the collapsible FAQ
   panels (and their nested .row negative margins) can never overhang the card.
   Submit / validation / signature / DSGVO behaviour is untouched.
   ------------------------------------------------------------------------- */
.entry-faq {
  clear: both;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.entry-faq .collapse,
.entry-faq .collapsing {
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   #149: profile / settings shell. From lg up the profile navigation is a side
   column (settings_base.html gives it col-lg-2); below lg it collapses into a
   compact, wrapped horizontal bar so the profile, personal-data and logout pages
   use the full tablet width for their actual content instead of losing a fixed
   side column. Nav links and routes are unchanged — only their layout.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .settings-nav .sidebar-sticky {
    position: static;
  }
  .settings-nav .nav.flex-column {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .settings-nav .nav-item {
    flex: 0 1 auto;
  }
  .settings-nav .nav-link {
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------------------
   B-12 (QA-UI-012): soften the mobile profile navigation. Below lg the
   settings nav is a full-width solid dark-blue block that visually overwhelms
   the actual profile content. Keep the same links, routes and full tap targets
   but render them as a light, chip-style bar with a clear active/hover state.
   Desktop (>= lg) keeps the existing side-column styling untouched.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .settings-nav .nav.bg-light {
    background-color: transparent !important;
  }
  .settings-nav .nav-item.border {
    border: 0 !important;
  }
  .settings-nav .nav-link {
    background-color: #f1f3f5;
    color: #05396b !important;
    border: 1px solid #d5dbe2;
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
  }
  .settings-nav .nav-link:hover,
  .settings-nav .nav-link:focus,
  .settings-nav .nav-link.active {
    background-color: #05396b;
    color: #fff !important;
    border-color: #05396b;
  }
}

/* -------------------------------------------------------------------------
   #189: profile contrast & active states.

   Desktop (>= lg) settings navigation used the low-contrast Bootstrap
   `.text-light` link colour on a light background (that class is now removed
   from settings_base.html). These rules give the side-column nav a
   high-contrast dark-blue text (>= 4.5:1 on the light background), visibly
   distinct hover / focus / active / pressed states, and a `:focus-visible`
   outline (>= 3:1) so keyboard users always see where they are. The turquoise
   `.btn-primary` download button and every route are untouched — colour only.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .settings-nav .nav-link {
    color: #05396b;
    background-color: #fff;
  }
  .settings-nav .nav-link:hover {
    color: #05396b;
    background-color: #e9eef4;
  }
  .settings-nav .nav-link.active,
  .settings-nav .nav-link[aria-current="page"] {
    color: #fff;
    background-color: #05396b;
    font-weight: 600;
  }
  .settings-nav .nav-link:active {
    background-color: #042a4f;
    color: #fff;
  }
}

/* Keyboard focus is always clearly visible (>= 3:1), on both viewports. */
.settings-nav .nav-link:focus-visible {
  outline: 3px solid #0b5ed7;
  outline-offset: 2px;
}

/* #189: the profile meta labels ("Adresse", "USt ID", …) used an inline
   #8e8e8e that failed 4.5:1 on white. This reusable class raises the contrast
   (#4d5157 on white is ~7:1) and keeps the small-label sizing in one place. */
.profile-meta {
  color: #4d5157;
  font-size: 12px;
}

/* #191: a client-side "required" marker for the conditionally-required foreign
   ID-document fields. The JS toggle adds `.field-required` to a field wrapper
   when the guest's citizenship makes it mandatory; crispy does not know this at
   render time because the requirement depends on a value chosen in the form.
   Presentation only — EntryForm.clean() is authoritative. */
.field-required > label:first-child::after,
.field-required .create-label::after {
  content: " *";
  color: #dc3545;
}

/* -------------------------------------------------------------------------
   B-03 (QA-UI-003): raise core interactive targets to ~44x44 CSS px on phone
   and tablet so login, registration, password-reset and other core controls
   (inputs, primary buttons, the navbar toggler) are comfortably tappable. The
   rules are gated below lg, so the desktop layout is unchanged.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .form-control,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    min-height: 44px;
  }
  .btn:not(.btn-sm) {
    min-height: 44px;
  }
  .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
  }
}