:root,
[data-bs-theme="light"] {
    --fewohbee-blue-dark: #00203b;
    --fewohbee-blue: #012546;
    --fewohbee-blue-light: #082a4d;
    --fewohbee-orange-dark: #f78b00;
    --fewohbee-orange: #fb9005;
    --fewohbee-orange-light: #ffb11a;
    --fewohbee-wordmark-blue: var(--fewohbee-blue);
    --fewohbee-wordmark-orange: var(--fewohbee-orange);
    --feb-surface: #f5f5f5;
    --feb-surface-border: #d3d3d3;
    --feb-border-strong: #666;
    --feb-border-muted: #ddd;
    --feb-reservation-text: #fff;
    --feb-reservation-confirmed-bg: #2d9434;
    --feb-reservation-option-bg: #f6e95c;
    --feb-reservation-option-text: #666;
    --feb-reservation-option-border: #999;
    --feb-weekend-bg: #eee;
    --feb-selection-bg: #f5f5f5;
    --feb-ui-selecting-bg: #feca40;
    --feb-ui-selected-bg: #f39814;
}

[data-bs-theme="dark"] {
    --fewohbee-wordmark-blue: #78bced;
    --fewohbee-wordmark-orange: var(--fewohbee-orange-light);
    --feb-surface: #1f2226;
    --feb-surface-border: #3a3f45;
    --feb-border-strong: #9aa0a6;
    --feb-border-muted: #444a52;
    --feb-reservation-text: #f8f9fa;
    --feb-reservation-confirmed-bg: #2e7d32;
    --feb-reservation-option-bg: #bfa23a;
    --feb-reservation-option-text: #1b1b1b;
    --feb-reservation-option-border: #9f8732;
    --feb-weekend-bg: #3a3f44;
    --feb-selection-bg: #2a2f33;
    --feb-ui-selecting-bg: #b77724;
    --feb-ui-selected-bg: #c06a1b;
    --bs-primary: #1f4b8f;
    --bs-primary-rgb: 31, 75, 143;
}

[data-bs-theme="light"] .navbar.bg-primary {
    --bs-navbar-color: rgba(255, 255, 255, 0.85);
    --bs-navbar-hover-color: rgba(255, 255, 255, 1);
    --bs-navbar-active-color: rgba(255, 255, 255, 1);
    --bs-navbar-brand-color: rgba(255, 255, 255, 1);
    --bs-navbar-brand-hover-color: rgba(255, 255, 255, 1);
}

[data-bs-theme="dark"] .navbar.bg-primary {
    --bs-navbar-color: rgba(var(--bs-body-color-rgb), 0.85);
    --bs-navbar-hover-color: rgba(var(--bs-body-color-rgb), 1);
    --bs-navbar-active-color: rgba(var(--bs-body-color-rgb), 1);
    --bs-navbar-brand-color: rgba(var(--bs-body-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-body-color-rgb), 1);
    --bs-navbar-toggler-border-color: rgba(var(--bs-body-color-rgb), 0.2);
}

[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary-bg);
    --bs-btn-border-color: var(--bs-secondary-bg);
    --bs-btn-hover-bg: #2f3338;
    --bs-btn-hover-border-color: #2f3338;
    --bs-btn-active-bg: #3a3f45;
    --bs-btn-active-border-color: #3a3f45;
}

body {
    font-size: 0.9rem
}

.hk-row-form {
    display: contents;
}

.btn {
    font-size: 0.9rem;
}

.dropdown-menu {
    font-size: 0.9rem;
}

.popover-body, .popover-header {
    font-size: 0.9rem;
}

.form-switch > .form-check-input {
    margin-top: .25em;
    margin-right: .75em;
}

.login {
    border-color: var(--feb-surface-border);
    border-width: 1px;
    border-style: solid;
    border-radius: 15px;
    padding: 15px;
    background-color: var(--feb-surface);
}

.fewohbee-wordmark-blue {
    color: var(--fewohbee-wordmark-blue);
}

.fewohbee-wordmark-orange {
    color: var(--fewohbee-wordmark-orange);
}

.button-hidden {
    visibility: hidden;
}

.reservation {
    padding: 4px 2px !important;
    max-width: 0; /* force td to respect colspan width, enables text-overflow on inner */
}

/* Half-day cell model: remove all vertical borders, then re-add at day boundaries */
#reservation-table tbody td {
    border-left: none !important;
    border-right: none !important;
}

#reservation-table tbody td.day-start {
    border-left: 1px solid var(--feb-border-muted) !important;
}

.td-half {
    padding: 0 !important;
}

/* Blocked cell styling */
.td-blocked {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        var(--feb-border-muted) 4px,
        var(--feb-border-muted) 5px
    );
    padding: 0 !important;
}

.blocked-inner {
    width: 100%;
    height: 100%;
    min-height: 1.7rem;
    cursor: pointer;
}

.reservation-inner {
    border: 1px solid var(--feb-border-strong);
    color: var(--feb-reservation-text);
    padding: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reservation-inner[draggable="true"] {
    cursor: grab;
}

.reservation-inner.reservation-dragging {
    cursor: grabbing;
    opacity: .55;
}

.reservation-inner.reservation-moving {
    opacity: .55;
    pointer-events: none;
}

#reservation-table .reservation-drop-target {
    background: var(--feb-ui-selecting-bg) !important;
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}

.reservation-confirmed {
    background-color: var(--feb-reservation-confirmed-bg);
}

.reservation-option {
    background-color: var(--feb-reservation-option-bg);
    color: var(--feb-reservation-option-text);
    border-color: var(--feb-reservation-option-border);
}

.reservation-table-weekend-single {
    background-color: var(--feb-weekend-bg) !important;
}

.mouse-pointer {
    cursor: pointer;
}

.border-left-thick {
    border-left: 2px solid var(--feb-border-muted);
}

.cell-selected {
    background-color: var(--feb-selection-bg);
}

/* Column widths come from the colgroup, not from the cells: on a table,
   min-width/max-width on cells are undefined per spec and ignored, and width
   is only a suggestion. A table stretched to 100% therefore handed the
   apartment column a share of the leftover space no matter what it was told,
   which is what made it needlessly wide on short periods.

   Laid out fixed so the colgroup actually decides, and given an explicit
   width so that "fixed" doesn't also mean "squeezed": at least the viewport,
   and 46px per day once there are enough days to exceed it - which is when
   the container starts scrolling, as before. Both custom properties are set
   on the table by reservation_table.html.twig. */
#reservation-table {
    table-layout: fixed;
    width: max(
        100%,
        calc(var(--reservation-name-col, 8ch) + 1.5rem + var(--reservation-day-count, 30) * 46px)
    );
}

/* Longest label plus cell padding; the half-day columns are left unsized and
   split whatever is left in equal parts. */
#reservation-table > colgroup > col.reservation-name-col {
    width: calc(var(--reservation-name-col, 8ch) + 1.5rem);
}

/* Right border on the last cell of each row */
#reservation-table tbody tr > :last-child {
    border-right: 1px solid var(--feb-border-muted) !important;
}

.table-reservation .ui-selecting, .table-reservation-year .ui-selecting {
    background: var(--feb-ui-selecting-bg) !important;
}

.table-reservation .table-days > th {
    position: relative;
}

/* remove border because of box-shadow for sticky header */
.table.table-sticky,.table-sticky tbody tr:first-child { 
    border-top: 0 !important;
}

/* remove border because of box-shadow for sticky header */
.table-sticky thead tr, .table-sticky thead th { 
    border-top: 0 !important; 
    border-bottom: 0 !important;
}

.table-responsive { position: relative; }

/* With border-collapse the table paints the shared border lines, not the cells,
   so a sticky header cell has nothing to cover them with - the reservation bars
   scrolling underneath stayed visible as a coloured line in every border
   between two day columns.

   The header cells therefore give up their borders entirely, which leaves the
   table nothing to paint there and nothing to shine through. The background
   covers the full cell box; the horizontal lines come from an inset shadow on
   the cell, which sticks with it. */
.table.table-sticky thead th, .table.table-sticky thead td {
  position: sticky;
  z-index: 3;
  border: 0 !important;
  background-color: var(--bs-table-bg, var(--bs-body-bg));
  box-shadow: inset 0 -1px 0 var(--bs-border-color); /* bottom line */
}

.table.table-sticky thead tr:first-child td{
  box-shadow:
    inset 0  1px 0 var(--bs-border-color),  /* top line */
    inset 0 -1px 0 var(--bs-border-color);  /* bottom line */
}

/* The vertical separator sits in a pseudo-element rather than in that shadow:
   header cells can carry a background or shadow of their own (the calendar
   entries' accent bars, partly set inline), which would override a shadow
   declared here. It sits on the inside of the right edge so the neighbouring
   cell's background cannot paint over it. */
.table.table-sticky thead th::after,
.table.table-sticky thead td::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background-color: var(--bs-border-color);
  pointer-events: none;
}

/* The right-edge pseudo-element above supplies the separators between header
   cells. Since their real borders are disabled, the first cell in each row
   also needs an explicit left edge to close the table outline. */
.table.table-sticky thead tr > :first-child::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: var(--bs-border-color);
  pointer-events: none;
}

/* left sticky column in reservation overview*/
.table.table-sticky tbody tr > *:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: var(--bs-table-bg, var(--bs-body-bg));
  box-shadow: 
    inset  1px 0 0 var(--bs-border-color), /* linke Linie */
    inset -1px 0 0 var(--bs-border-color); /* rechte Linie */
  background-clip: padding-box;
  border-right: 0;
  border-left: 0;
}

.template-editor-content {
    min-height: 320px;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: var(--bs-body-bg);
    font-size: 0.95rem;
}

.template-editor-content:focus {
    outline: none;
}

.simple-html-editor-content .ProseMirror:focus {
    outline: none;
    box-shadow: none;
}

.template-editor-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
}

.template-editor-content table th,
.template-editor-content table td {
    border: 1px solid var(--bs-border-color);
    padding: 0.35rem 0.5rem;
    vertical-align: top;
}

.template-editor-content .header,
.template-editor-content .footer {
    border: 1px var(--bs-border-color) dashed;
    width: 100%;
}

.template-editor-snippet-panel {
    width: 260px;
    min-width: 260px;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 0.75rem;
    margin-right: 0.75rem;
    border-right: 1px solid var(--bs-border-color);
}

.template-editor-snippet-panel h6 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-body-color);
    opacity: 0.65;
}

.template-editor-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.template-editor-toolbar .btn {
    line-height: 1;
}

.template-editor-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
}

.template-editor-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.template-editor-toolbar-row:has(.template-editor-row-controls) {
    flex-direction: column;
    align-items: flex-start;
}

.template-editor-toolbar-row:has(.template-editor-row-controls) > .template-editor-row-controls {
    align-self: stretch;
}

.template-editor-toolbar-row-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    flex: 1 1 auto;
}

.template-editor-toolbar-group {
    display: inline-flex;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    overflow: hidden;
    background: var(--bs-body-bg);
}

.template-editor-btn {
    border: 0;
    border-right: 1px solid var(--bs-border-color);
    border-radius: 0 !important;
    min-width: 2.3rem;
}

.template-editor-toolbar-group .template-editor-btn:last-child {
    border-right: 0;
}

.template-editor-btn.is-active {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.template-editor-mode-btn {
    margin-left: auto;
}

.template-editor-select {
    min-width: 120px;
    border: 0;
    border-right: 1px solid var(--bs-border-color);
    border-radius: 0 !important;
}

.template-editor-toolbar-group .template-editor-select:last-child {
    border-right: 0;
}

.template-editor-snippets {
    min-width: 220px;
}

.template-editor-row-controls {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    padding: 0.5rem;
    background: var(--bs-body-bg);
    min-width: 380px;
}

.template-editor-row-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr auto;
    gap: 0.4rem;
    align-items: center;
}

.template-editor-row-grid .form-check-input {
    cursor: pointer;
}

.template-editor-row-grid .form-check-label {
    white-space: nowrap;
}

@media (max-width: 992px) {
    .template-editor-row-controls {
        min-width: 100%;
    }

    .template-editor-row-grid {
        grid-template-columns: 1fr;
    }
}

.snippet-item {
    cursor: grab;
    background: var(--bs-tertiary-bg);
    transition: background-color .15s ease-in-out;
    font-size: 0.82rem;
}

.snippet-item:hover {
    background: var(--bs-secondary-bg);
}

.template-editor-comment-token {
    display: none;
}

.template-editor-style-token {
    display: none;
}

.template-editor-content [data-template-style] {
    display: none !important;
}

/* ── Image resize & alignment ── */

.template-editor-image-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    cursor: default;
}

.template-editor-image-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

.template-editor-image-wrapper.is-selected {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.template-editor-image-resize-handle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 12px;
    height: 12px;
    background: var(--bs-primary);
    border: 2px solid var(--bs-body-bg);
    border-radius: 2px;
    cursor: se-resize;
    opacity: 0;
    transition: opacity 0.15s;
}

.template-editor-image-wrapper:hover .template-editor-image-resize-handle,
.template-editor-image-wrapper.is-selected .template-editor-image-resize-handle {
    opacity: 1;
}

/* Template include pill (template-in-template) */
.template-include {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    background: var(--bs-info-bg-subtle, #cff4fc);
    color: var(--bs-info-text-emphasis, #055160);
    border: 1px solid var(--bs-info-border-subtle, #9eeaf9);
    border-radius: 0.375rem;
    padding: 0.1em 0.5em;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.template-editor-image-toolbar {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 2px;
    box-shadow: var(--bs-box-shadow-sm);
    z-index: 10;
}

.template-editor-image-toolbar .btn {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1;
}

/* ── Variable picker ── */

.template-editor-variable-picker {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: var(--bs-box-shadow);
    width: 280px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
}

.template-editor-variable-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--bs-tertiary-bg);
    border-radius: 0.375rem 0.375rem 0 0;
}

.template-editor-variable-picker-header .btn-close {
    transform: scale(0.7);
}

.template-editor-variable-picker-list {
    overflow-y: auto;
    padding: 0.25rem 0;
}

.template-editor-variable-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    color: inherit;
    gap: 0.5rem;
}

.template-editor-variable-label:hover {
    background: var(--bs-primary-bg-subtle, #e8f0fe);
}

.template-editor-variable-name {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
}

.template-editor-variable-type-hint {
    font-size: 0.7rem;
    color: var(--bs-secondary);
    white-space: nowrap;
}

.template-editor-variable-type-entity > .template-editor-variable-label,
.template-editor-variable-type-collection > .template-editor-variable-label,
.template-editor-variable-type-array > .template-editor-variable-label {
    font-weight: 500;
}

.template-editor-variable-item.is-expanded > .template-editor-variable-label {
    background: var(--bs-tertiary-bg);
}

.template-editor-variable-children {
    padding-left: 0.75rem;
    border-left: 2px solid var(--bs-border-color);
    margin-left: 0.6rem;
}

.template-editor-variable-loop-action {
    color: var(--bs-primary);
    font-style: italic;
}

.template-editor-variable-loop-action:hover {
    background: var(--bs-primary-bg-subtle, #e8f0fe);
}

.table.table-sticky tbody tr > *:nth-child(2) {
  border-left: 0;
}


.reservation-table-weekend {
    background-color: var(--feb-weekend-bg) !important;
}

/* Holiday highlighting must win over the plain weekend background -
   .reservation-table-weekend uses !important, so only a combined selector
   (higher specificity) with its own !important can override it. Colors
   mirror Bootstrap's bg-info bg-opacity-25 utility.
   Calendar-entry accent lines (box-shadow, see calendar_accent_marker_style)
   don't need an equivalent override - box-shadow and background-color are
   different properties and never fight for precedence the way two
   background-colors do. */
.reservation-table-weekend.holiday-info {
    background-color: rgba(var(--bs-info-rgb), .25) !important;
}


/* remove bottom border of tr for multiple reservations of one apartment (select tr where the next tr has border-top-0 class) */
#reservation-table tr:has( + .border-top-0) {
    border-bottom: 0 !important;
}

/* Calendar-entry accent bars are rendered in both the weekday and the
   date-number row (see reservation_table.html.twig / calendar_accent_marker_style);
   toggleDisplayTableRows() adds .weekday-row-visible once that row is
   shown, so suppress the duplicate bars on the date row - overriding the
   inline box-shadow/background-image needs !important since inline styles
   otherwise win. Restores the plain bottom border (rather than "none") so
   non-entry cells don't lose theirs too, and clears the background-image
   layers (the segmented-row gradients) entirely. */
/* Note that this box-shadow doubles as the bottom line the sticky header
   otherwise draws for itself - the !important overrides it for this one row.
   The two have to match: change the header line (colour, width) where it is
   defined and the date row silently keeps the old one. */
#reservation-table.weekday-row-visible .table-days th {
    box-shadow: inset 0 -1px 0 0 var(--bs-border-color) !important;
    background-image: none !important;
}

#reservation-table .room-info {
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* fix for autocomplete not  shown */
.ui-front { 
    z-index: 9999; 
}

.price-period .badge {
    font-size: 90%;
    margin: 4px;
}

.badge .close {
    margin-left: .25rem;
    color: inherit;
    font-size: medium;
    font-weight: bold;
}

/* yearly reservation overview */
.reservation-yearly-parent { 
    padding: 0 !important; 
    position: relative; 
    overflow:hidden; 
}

.no-pointer-events {
    pointer-events: none;
}

div .reservation-yearly {
    padding: .5rem;
    width: 100%; 
    height: 100%;
    pointer-events: auto; 
    z-index: 1;
    cursor: pointer;
}

div .reservation-yearly-day {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 2; 
    padding: .5rem;
}
.month-reservationstartend {
    flex: 1 0 100%;
}
.month-reservation-end {
    transform: skewY(-45deg);
    transform-origin: bottom left;
}

.month-reservation-start {
    transform: skewX(-45deg);
    transform-origin: top right;
}
.month-reservation-onlystart {
    transform: skewY(-45deg);
}

.dummy-day {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: unset;
    pointer-events: auto;
    z-index: 1;
}
.month-reservation-start.dummy-day {
    left: 1.4rem;
}

.month-reservation-end.dummy-day {
    left: -1.4rem;
    transform: skewX(-45deg);
}

/*
 * Room block (out of order) in the yearly month view - hatched instead of a solid color.
 * Positioned absolute (filling the day cell) rather than a flex item: on a turnover day
 * a reservation half-cell already claims the flex row, and a second flex item with
 * flex-basis 100% would be pushed out of the cell and clipped away by overflow:hidden.
 * Absolute lets the block overlay its half of the cell independently.
 *
 * The hatch lives on the ::before layer, not on this element directly, because start/end
 * days re-use the reservations' exact skewY(-45deg) transform for a pixel-perfect matching
 * diagonal (corner-to-corner clip-path would be off by a few degrees since the cell isn't
 * square). Skewing the element would tilt the hatch too; the ::before counter-skews by the
 * same angle, cancelling the distortion so the hatch stays parallel to the full-day cells.
 * It is oversized so the counter-skewed layer still covers the whole skewed box.
 */
.month-reservation-blocked {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
/*
 * Sit one layer below the reservations (which are z-index 1). Where a block and a
 * reservation meet on a turnover day, their skewed diagonals share an edge with a
 * sub-pixel overlap - invisible for the reservation's solid fill but noticeable as
 * hatch spilling over. Painting the opaque reservation on top lets it define that
 * edge cleanly and hide any spill. The two-class selector outweighs `div .reservation-yearly`.
 */
.reservation-yearly.month-reservation-blocked {
    z-index: 0;
}
.month-reservation-blocked::before {
    content: "";
    position: absolute;
    inset: -150%;
    background-color: rgba(108, 117, 125, 0.08);
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        var(--feb-border-muted) 4px,
        var(--feb-border-muted) 5px
    );
}

/* start/end (half) days: mirror the reservation skew exactly for a matching diagonal */
.month-reservation-blocked.month-reservation-start,
.month-reservation-blocked.month-reservation-onlystart {
    transform: skewY(-45deg);
    transform-origin: top right;
}
.month-reservation-blocked.month-reservation-end {
    transform: skewY(-45deg);
    transform-origin: bottom left;
}
/* counter-skew the hatch layer so its lines stay parallel with the full-day cells */
.month-reservation-blocked.month-reservation-start::before,
.month-reservation-blocked.month-reservation-onlystart::before,
.month-reservation-blocked.month-reservation-end::before {
    transform: skewY(45deg);
}

/*
 * Forms
 */
/* reduce default font size of labels in modals */
.modal-body .col-form-label {
    font-size: 14px;
}

/* add hint to required fields */
#accordionSettings label.required:after {
    content: " *";
}

/* compact e-invoice readiness disclosure: hide the default marker, keep the summary clickable */
details.einvoice-readiness > summary {
    list-style: none;
    cursor: pointer;
}
details.einvoice-readiness > summary::-webkit-details-marker {
    display: none;
}