:root {

  --color-whisky: #8b5e04;
  --color-accent1: #efd754;
  --color-accent2: #c7b683;
  --color-accent3: #c5962b;
  --color-accent4: #40adbe;

  --color-error: #6b1d2b;
  --color-toast-succ: #9ACD32;
  --color-toast-err: #ffc1b6;

  --color-white: #ffffff;
  --bg-main: #f3f2f0;
  --bg-medium: #b4b3ac;
  --bg-dark: #31312f;
  --color-black: #000000;

  --bg-whisky: var(--color-whisky);
  --bg-white: var(--color-white);
  --bg-card: var(--bg-white);
  --bg-card2: var(--bg-medium);

  --border-light: var(--bg-medium);
  --border-medium: var(--bg-dark);

  --btn-bg: var(--bg-main);
  --btn-bg-2: var(--color-accent2);
  --btn-bg-3: var(--color-accent3);
  --btn-border: #d1d5db;
  --btn-hover: var(--bg-medium);
  --btn-selected: var(--color-whisky);
  --ui-gap: 6px;

  --text-main: var(--bg-dark);
  --text-muted: var(--bg-medium);

  --tt-text: var(--color-white);
  --tt-bg: var(--bg-dark);
}

/* =========================
 * Basis
 * ========================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
}

h1,
h2,
h3 {
  margin-top: 0;
}

h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

h2 {
  font-size: 20px;
  margin-bottom: 8px;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.card-head h2,
.card-head .hint {
  margin-bottom: 0;
}

.dashboard-main-card-head {
  align-items: center;
}

.card-head h2,
.card-head h3 {
  color: var(--color-whisky);
}

.card-head .hint {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

.card-head-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.card-head-title h2 {
  margin-bottom: 0;
}

.log-toggle-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  color: var(--color-whisky);
  font-size: 38px;
  font-weight: 700;
  line-height: 0.8;
  transform: translateY(-4px);
}

h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

a {
  color: inherit;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

.content {
  padding: 18px;
}

.bewertungen-page .wrap,
.abrechnen-page .wrap,
.buchen-page .wrap,
.journal-page .wrap,
.people-page .wrap,
.flaschen-page .wrap,
.ranglisten-page .wrap,
.dashboard-page .wrap {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

.mobile-app.mobile-flaschen-page .wrap {
  padding-left: 0;
  padding-right: 0;
}

.mobile-app.mobile-flasche-bewerten-page .wrap,
.mobile-app.mobile-flasche-detail-page .wrap,
.mobile-app.mobile-saldo-page .wrap,
.mobile-app.mobile-ranglisten-page .wrap {
  padding-left: 0;
  padding-right: 0;
}

.mobile-app.mobile-flasche-bewerten-page .card-head h2,
.mobile-app.mobile-flasche-bewerten-page .card-head h3 {
  color: var(--color-whisky);
  font-size: 16px;
}

.mobile-app.mobile-flaschen-page .card-head h2,
.mobile-app.mobile-flaschen-page .card-head h3 {
  color: var(--color-whisky);
  font-size: 16px;
}

.mobile-app.mobile-saldo-page .card-head h2,
.mobile-app.mobile-saldo-page .card-head h3 {
  color: var(--color-whisky);
  font-size: 16px;
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-section-card .card-head h3 {
  font-size: 16px;
}

.mobile-app.mobile-flasche-bewerten-page {
  overflow-x: hidden;
}

.mobile-app.mobile-flasche-bewerten-page .app,
.mobile-app.mobile-flasche-bewerten-page .content,
.mobile-app.mobile-flasche-bewerten-page .wrap,
.mobile-app.mobile-flasche-bewerten-page #bewertenContent,
.mobile-app.mobile-flasche-bewerten-page .bewerten-view {
  overflow-x: hidden;
  min-width: 0;
  max-width: 100%;
}

.mobile-app.mobile-flasche-bewerten-page .card-head {
  flex-wrap: wrap;
  align-items: flex-start;
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-main-head {
  gap: 10px;
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-head-title-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-head-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-head-nav > * {
  min-width: 0;
}

.mobile-app.mobile-flasche-bewerten-page .card-head > h2,
.mobile-app.mobile-flasche-bewerten-page .card-head > h3,
.mobile-app.mobile-flasche-bewerten-page .bewerten-head-title-row,
.mobile-app.mobile-flasche-bewerten-page .bewerten-head-nav,
.mobile-app.mobile-flasche-bewerten-page .mode-actions,
.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-labels,
.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-labels .label,
.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-labels .hint,
.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-controls,
.mobile-app.mobile-flasche-bewerten-page .bewerten-choice-controls,
.mobile-app.mobile-flasche-bewerten-page .bewerten-choice-buttons,
.mobile-app.mobile-flasche-bewerten-page .bewerten-detail-line,
.mobile-app.mobile-flasche-bewerten-page .bewerten-notes-grid,
.mobile-app.mobile-flasche-bewerten-page .bewerten-notes-field,
.mobile-app.mobile-flasche-bewerten-page .fallback-switch {
  min-width: 0;
  max-width: 100%;
}

.mobile-app.mobile-flasche-bewerten-page .mode-actions {
  width: 100%;
  margin-left: 0;
  justify-content: flex-start;
}

.mobile-app.mobile-flasche-bewerten-page .mobile-bewerten-id-btn {
  white-space: nowrap;
}

.mobile-app.mobile-flasche-bewerten-page #backToDetailBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  box-sizing: border-box;
  gap: 6px;
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
  text-align: center;
}

.mobile-app.mobile-flasche-bewerten-page .mode-actions > * {
  min-width: 0;
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-labels {
  align-items: flex-start;
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-labels .label {
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-labels .hint {
  flex: 0 0 auto;
  white-space: nowrap;
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-blind-line {
  flex-wrap: wrap;
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-detail-line {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.muted,
.hint {
  color: var(--text-muted);
}

.hint {
  font-size: 14px;
  margin-bottom: 12px;
}

.empty-card-message {
  padding: 0 0 8px;
  margin-bottom: 0;
}

.nowrap {
  white-space: nowrap;
}

/* =========================
 * Topbar / Header
 * ========================= */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
}

.brandRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.brand-icon {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
  display: block;
}

.brand-text {
  display: inline-block;
  line-height: 1.1;
}

.dashboard-build-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  align-self: center;
  min-width: 0;
  text-align: right;
  color: var(--text-main);
}

.dashboard-build-meta-line {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardBuildVersion {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#dashboardBuildCommittedAt {
  font-size: 12px;
  color: color-mix(in srgb, var(--text-main) 72%, white);
}

.topbar.sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

@media (max-width: 820px) {
  .dashboard-build-meta {
    align-items: flex-start;
    text-align: left;
  }
}

/* =========================
 * Karten
 * ========================= */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card2 {
  background: var(--bg-card2);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  padding: 16px 18px;
  margin-top: 12px;
}

.card2 + .card2 {
  margin-top: 12px;
}

.card--stacked {
  margin-bottom: 12px;
}

.card-table-scroll {
  overflow: auto;
}

/* =========================
 * Buttons
 * ========================= */

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text-main);
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

[hidden] {
  display: none !important;
}

button:hover,
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

button:disabled,
.btn:disabled,
.btn.is-disabled,
.btn.ghost {
  opacity: 0.5;
  cursor: not-allowed;
}

button:disabled:hover,
.btn:disabled:hover,
.btn.is-disabled:hover,
.btn.ghost:hover {
  transform: none;
  box-shadow: none;
}

.btn.is-disabled {
  pointer-events: none;
}

nav.menu .btn.active,
.btn.active {
  background: var(--btn-selected);
  color: var(--bg-main);
  font-weight: 400;
}

/* Ensure ~2mm spacing between menu buttons (approx. 6px) */
.menu {
  display: flex;
  gap: var(--ui-gap);
  align-items: center;
}

.mobile-app .menu .btn {
  white-space: nowrap;
  flex: 0 0 auto;
}

.btn.small {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;
}

.btn.small.active {
  background: var(--btn-selected);
  color: var(--bg-white);
  font-weight: 400;
}


/* =========================
 * Formulare
 * ========================= */

label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  border: 1px solid var(--btn-border);
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text-main);
}

#createFlascheForm input:required,
#completeFlascheForm input:required,
#createUserForm input:required,
#flascheDetailContent input:required,
#flascheDetailContent select:required,
#flascheDetailContent textarea:required {
  border-color: var(--text-main);
}

input:focus,
select:focus,
textarea:focus,
.inline-input:focus,
.inline-select:focus,
.inline-textarea:focus {
  outline: none;
  border-color: var(--bg-whisky);
  box-shadow: 0 0 0 1px var(--bg-whisky);
}

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

.inline-input,
.inline-textarea,
.inline-select {
  width: 100%;
  padding: 8px;
  font-size: 14px;
}

.inline-select-wrap {
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
}

.inline-select-wrap.is-open {
  z-index: 10002;
}

.inline-select-trigger {
  width: 100%;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.25;
  min-height: 24px;
  font-family: inherit;
  border: 1px solid var(--color-whisky);
  border-radius: 3px;
  background: var(--bg-main);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.inline-select-trigger:focus,
.inline-select-wrap.is-open .inline-select-trigger {
  outline: none;
  border-color: var(--color-whisky);
  color: var(--color-whisky);
  box-shadow: 0 0 0 1px var(--color-whisky);
}

.inline-select-wrap.is-disabled .inline-select-trigger {
  cursor: not-allowed;
  opacity: 0.7;
}

.inline-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 100%;
  width: max-content;
  display: none;
  flex-direction: column;
  align-items: stretch;
  z-index: 10003;
  padding: 4px;
  border: 1px solid var(--color-whisky);
  border-radius: 6px;
  background: var(--bg-main);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.inline-select-wrap.is-open .inline-select-menu {
  display: flex;
}

.inline-select-option {
  display: block;
  width: 100%;
  border: none;
  background: var(--bg-card);
  color: var(--text-main);
  text-align: left;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.25;
}

.inline-select-option:hover,
.inline-select-option:focus {
  outline: none;
  background: var(--color-whisky);
  color: var(--bg-card);
}

.inline-select-option.is-selected {
  background: var(--bg-main);
  color: var(--text-main);
}

.inline-select-option.is-selected:hover,
.inline-select-option.is-selected:focus {
  background: var(--color-whisky);
  color: var(--bg-card);
}

.inline-textarea {
  min-height: 60px;
}

/* =========================
 * Tabellen
 * ========================= */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-white);
  font-size: 14px;
}

th {
  text-align: left;
  padding: 10px;
  border-bottom: 2px solid var(--border-medium);
  font-weight: 700;
  color: var(--text-main);
  font-size: 16px;
}

.zahlung-summe-label {
  white-space: nowrap;
  font-weight: 700;
  font-size: 16px;
  font-family: inherit;
  color: var(--text-main);
}

td {
  padding: 10px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

td.num,
th.num,
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

tr:hover:not(.selected) td {
  background: transparent;
}

tr.selected td {
  background: var(--btn-selected) !important;
}

/* =========================
 * Layout-Helfer
 * ========================= */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* Two-column cards: form (2/3) + utilities (1/3) */
.cards-2col {
  display: grid;
  grid-template-columns: 5fr 3fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 20px;
}

.cards-2col > .card {
  height: 100%;
  margin-bottom: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.cards-2col > .card h2 {
  margin-bottom: var(--ui-gap);
}

.cards-2col-half {
  display: grid;
  grid-template-columns: 5fr 3fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 20px;
}

.cards-2col-half > .card {
  height: 100%;
  margin-bottom: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.cards-2col-half > .card h2 {
  margin-bottom: var(--ui-gap);
}

.buttons-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--ui-gap);
  justify-content: start;
  align-content: start;
}

.left-icon {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}
.id-text { vertical-align: middle; }

.btn-init {
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg-3);
  font-weight: 400;
  cursor: pointer;
  box-shadow: none;
  color: var(--text-main);
}
.btn-init:hover {
  background: var(--btn-bg-3);
}

.buttons-grid .btn-init {
  width: auto;
  justify-content: center;
}

#flaschenButtonsGrid,
#peopleButtonsGrid {
  grid-template-columns: repeat(2, 1fr);
}
#flaschenButtonsGrid .btn-init,
#peopleButtonsGrid .btn-init {
  width: 100%;
}

#dashboardButtonsGrid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ui-gap);
  justify-content: flex-start;
  align-items: center;
  width: max-content;
}

#dashboardButtonsGrid .btn-init {
  width: auto;
  white-space: nowrap;
}

#dashboardWooButtonsGrid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ui-gap);
  justify-content: flex-start;
  align-items: center;
  width: max-content;
  margin-top: 12px;
}

#dashboardWooButtonsGrid .btn-init {
  width: auto;
  white-space: nowrap;
}

#mailshotsButtonsGrid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ui-gap);
  justify-content: flex-start;
  align-items: center;
  width: max-content;
}

#mailshotsButtonsGrid .btn-init {
  width: auto;
  white-space: nowrap;
}

#flaschenExportBtn,
#flaschenImportBtn,
#flaschenUpdatePricesBtn,
#flaschenUpdateNamesBtn,
#dashboardUpdatePricesBtn,
#dashboardUpdateNamesBtn,
#dashboardUpdateQrCodesBtn,
#dashboardFotosBearbeitenBtn,
#dashboardSettleAllBtn,
#dashboardBewertungenaktualisierenBtn,
#dashboardStammdatenBtn,
#dashboardInfoRefreshBtn,
#dashboardOpenMobileBtn,
#dashboardWooFlaschenBtn,
#dashboardWooRatingsBtn,
#mailshotBlankBtn,
#mailshotNewsletterBtn,
#mailshotEventBtn,
#mailshotEventReminderBtn,
#mailshotReminderBtn,
#mailshotWelcomeBtn,
#mailshotSoftwareBtn,
#peopleExportBtn,
#peopleImportBtn,
#peopleSettleAllBtn,
#peopleLeer4Btn,
#journalExportBtn,
#journalSettleAllBtn {
  background: var(--color-accent3);
  color: #fff;
}

#mailSaveTemplateBtn,
#mailPreviewBtn {
  background: var(--bg-main);
  color: var(--text-main);
}

#mailSaveTemplateBtn:hover,
#mailPreviewBtn:hover {
  background: var(--bg-main);
}

.bottles-status-segment.mode-edit-segment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 176px;
  height: 32px;
  flex: 0 0 auto;
}

.bottles-status-segment.mode-edit-segment .bottles-status-thumb {
  width: calc((100% - 4px) / 2);
}

.bottles-status-segment.mode-edit-segment .btn.small {
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
}

.bottles-status-segment:not(.mode-edit-segment) {
  height: 32px;
}

.bottles-status-segment.mode-edit-segment[data-state="edit"] .bottles-status-thumb {
  transform: translateX(0%);
}

.bottles-status-segment.mode-edit-segment[data-state="view"] .bottles-status-thumb {
  transform: translateX(100%);
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 12px;
  justify-content: start;
  align-items: start;
}

.grid3--second {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 12px;
  justify-content: start;
  align-items: start;
}

.grid3 .card2,
.grid3--second .card2 {
  width: max-content;
}

/* Compact action icons in user list */
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.actions {
  flex-wrap: nowrap;
}

/* Force icons to stay on one line and make them smaller */
.actions {
  white-space: nowrap;
}
.action-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  color: var(--text-main);
}
.action-icon span[aria-hidden] {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}
.action-icon:hover {
  background: transparent;
}
.action-icon.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.action-tooltip {
  display: none;
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  padding: 4px 8px;
  max-width: 240px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--tt-text);
  background: var(--tt-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  z-index: 20;
  pointer-events: none;
  box-sizing: border-box;
}
.action-icon:hover .action-tooltip {
  display: block;
}

/* On small screens, stack tooltip above the icon instead of sideways */
@media (max-width: 520px) {
  .action-tooltip {
    left: 50% !important;
    top: auto;
    bottom: calc(100% + 6px) !important;
    transform: translateX(-50%) !important;
    max-width: 200px;
    word-break: keep-all;
  }
}

.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.form-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.form-grid-7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--ui-gap);
  align-items: end;
}

.full {
  grid-column: 1 / -1;
}

.filters {
  display: grid;
  grid-template-columns: 2fr 1fr auto auto;
  gap: 12px;
  align-items: end;
}

.filters-journal {
  grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr auto auto;
}

.filters-ratings {
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr auto auto;
}

#filterForm.filters-flaschen {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.bottles-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bottles-head-left h2 {
  margin: 0;
}

.bottles-main-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.bottles-main-head .bottles-head-left,
#bottlesPagerRow,
.bottles-main-head .mode-actions {
  min-height: 34px;
  align-items: center;
}

#bottlesPagerRow {
  justify-self: center;
  white-space: nowrap;
}

.bottles-main-head .mode-actions {
  margin-left: 0;
  justify-self: end;
}

@media (max-width: 1180px) {
  .bottles-main-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  #bottlesPagerRow {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }
}

.bottles-status-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
}

.bottles-status-segment {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: var(--bg-main);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.bottles-status-segment .bottles-status-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc((100% - 4px) / 3);
  height: calc(100% - 4px);
  border-radius: 999px;
  background: var(--bg-medium);
  transition: transform 180ms ease;
  z-index: 0;
}

.bottles-status-segment[data-state="all"] .bottles-status-thumb {
  transform: translateX(0%);
}

.bottles-status-segment[data-state="open"] .bottles-status-thumb {
  transform: translateX(100%);
}

.bottles-status-segment[data-state="closed"] .bottles-status-thumb {
  transform: translateX(200%);
}

.abrechnen-people-scope-segment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.abrechnen-people-scope-segment .bottles-status-thumb {
  width: calc((100% - 4px) / 2);
}

.abrechnen-people-scope-segment[data-state="all"] .bottles-status-thumb {
  transform: translateX(0%);
}

.abrechnen-people-scope-segment[data-state="filter"] .bottles-status-thumb {
  transform: translateX(100%);
}

.mail-email-filter-segment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100px;
}

.mail-email-filter-segment .bottles-status-thumb {
  width: calc((100% - 4px) / 2);
}

.mail-email-filter-segment[data-state="with"] .bottles-status-thumb {
  transform: translateX(0%);
}

.mail-email-filter-segment[data-state="without"] .bottles-status-thumb {
  transform: translateX(100%);
}

.mail-sender-segment {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  flex: 1;
  min-width: 0;
}

.mail-sender-segment .bottles-status-thumb {
  width: calc((100% - 4px) / 3);
}

.mail-sender-segment[data-state="admin"] .bottles-status-thumb {
  transform: translateX(0%);
}

.mail-sender-segment[data-state="malcolm"] .bottles-status-thumb {
  transform: translateX(100%);
}

.mail-sender-segment[data-state="noreply"] .bottles-status-thumb {
  transform: translateX(200%);
}

.mail-sender-segment .btn.small {
  white-space: nowrap;
  font-size: 12px;
  padding: 0 6px;
}

.mail-replyto-segment {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  flex: 1;
  min-width: 0;
}

.mail-replyto-segment .bottles-status-thumb {
  width: calc((100% - 4px) / 4);
}

.mail-replyto-segment[data-state="carsten"] .bottles-status-thumb {
  transform: translateX(0%);
}

.mail-replyto-segment[data-state="scherzfl"] .bottles-status-thumb {
  transform: translateX(100%);
}

.mail-replyto-segment[data-state="joerg"] .bottles-status-thumb {
  transform: translateX(200%);
}

.mail-replyto-segment[data-state="ralf"] .bottles-status-thumb {
  transform: translateX(300%);
}

.mail-replyto-segment .btn.small {
  white-space: nowrap;
  font-size: 12px;
  padding: 0 6px;
}

.mobile-ratings-scope-segment {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-ratings-scope-segment .bottles-status-thumb {
  width: calc((100% - 4px) / 2);
}

.mobile-ratings-scope-segment[data-state="all"] .bottles-status-thumb {
  transform: translateX(0%);
}

.mobile-ratings-scope-segment[data-state="mine"] .bottles-status-thumb {
  transform: translateX(100%);
}

.mobile-ratings-filter-segment {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mobile-ratings-filter-segment .bottles-status-thumb {
  width: calc((100% - 4px) / 3);
}

.mobile-ratings-scope-segment .btn.small,
.mobile-ratings-filter-segment .btn.small {
  height: 12px !important;
  line-height: 12px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
}

.mobile-ratings-scope-segment,
.mobile-ratings-filter-segment {
  padding: 2px;
  background: var(--bg-main);
  border-color: transparent;
  box-shadow: none;
}

.mobile-ratings-scope-segment .bottles-status-thumb,
.mobile-ratings-filter-segment .bottles-status-thumb {
  background: var(--bg-white);
}

.mobile-ratings-scope-segment .btn.small.active,
.mobile-ratings-filter-segment .btn.small.active {
  background: transparent !important;
}

/* 5-button variant for journal time filter */
.bottles-status-segment.journal-time-segment {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bottles-status-segment.journal-time-segment .bottles-status-thumb {
  width: calc((100% - 4px) / 5);
}

.bottles-status-segment.journal-time-segment[data-state="all"] .bottles-status-thumb {
  transform: translateX(0%);
}

.bottles-status-segment.journal-time-segment[data-state="open"] .bottles-status-thumb {
  transform: translateX(100%);
}

.bottles-status-segment.journal-time-segment[data-state="week"] .bottles-status-thumb {
  transform: translateX(200%);
}

.bottles-status-segment.journal-time-segment[data-state="month"] .bottles-status-thumb {
  transform: translateX(300%);
}

.bottles-status-segment.journal-time-segment[data-state="closed"] .bottles-status-thumb {
  transform: translateX(400%);
}

.bottles-status-segment .btn.small {
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-main);
  border: none;
  position: relative;
  z-index: 1;
  box-shadow: none;
  font-weight: 500;
  transition: none;
}

.bottles-status-segment .btn.small:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

.bottles-status-segment .btn.small.active {
  background: var(--bg-white);
  color: var(--text-main);
  font-weight: 600;
}

th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}



th.sort-active {
  color: var(--color-whisky);
}

.sort-indicator {
  font-size: 10px;
  opacity: 0.8;
}

#filterForm.filters-people {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

#filterForm.filters-people > div:nth-child(2) {
  justify-self: end;
}

.buchen-filters-flaschen {
  grid-template-columns: minmax(0, 1.8fr) auto;
}

.buchen-filters-date {
  grid-template-columns: minmax(0, 1fr);
}

.buchen-filters-date input[type="date"] {
  width: 100%;
  padding: 0 var(--ui-gap);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  height: 28px;
  margin: 0;
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  background: var(--bg-main);
  color: var(--text-main);
  -webkit-text-fill-color: var(--text-main);
  caret-color: var(--text-main);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.buchen-filters-date input[type="date"]::-webkit-datetime-edit,
.buchen-filters-date input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.buchen-filters-date input[type="date"]::-webkit-datetime-edit-text,
.buchen-filters-date input[type="date"]::-webkit-datetime-edit-month-field,
.buchen-filters-date input[type="date"]::-webkit-datetime-edit-day-field,
.buchen-filters-date input[type="date"]::-webkit-datetime-edit-year-field {
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: var(--text-main);
  -webkit-text-fill-color: var(--text-main);
}

.buchen-filters-date input[type="date"]:focus {
  outline: none;
  border-color: var(--bg-whisky);
  box-shadow: 0 0 0 1px var(--bg-whisky);
}

.buchen-filter-actions {
  display: inline-flex;
  gap: 6px;
  justify-self: end;
}

.buchen-form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--ui-gap);
  align-items: end;
}

.buchen-form input[type="text"] {
  padding: 0 var(--ui-gap);
  font-size: 13px;
  line-height: 1;
  height: 28px;
  margin: 0;
  border-radius: 6px;
}

.btn-save-like {
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--btn-border);
  background: var(--color-accent1);
  color: var(--text-main);
  font-weight: 400;
  cursor: pointer;
  box-shadow: none;
}

.btn-save-like:hover {
  background: var(--color-accent1);
}

.btn-storno-like {
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--btn-border);
  background: var(--color-toast-err);
  color: var(--color-error);
  font-weight: 400;
  cursor: pointer;
  box-shadow: none;
}

.btn-storno-like:hover {
  background: var(--color-toast-err);
}

#createBookingBtn {
  background: var(--color-accent1);
}

#stornoBtn {
  background: var(--color-toast-err);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

#stornoBtn:hover {
  background: var(--color-toast-err);
}

.cards-2col-buchen {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 20px;
}

.abrechnen-page .cards-2col-buchen,
.buchen-page .cards-2col-buchen {
  margin-top: 0;
}

.cards-2col-buchen > .card {
  margin-bottom: 0;
}

.buchen-left-col {
  display: grid;
  gap: 18px;
  align-content: start;
}

.buchen-left-col > .card {
  margin-bottom: 0;
}

.buchen-right-col > .card {
  margin-bottom: 0;
}

.buchen-right-col {
  display: grid;
  gap: 18px;
  align-content: start;
}

.menu-page .buchen-left-col,
.menu-page .buchen-right-col {
  min-width: 0;
}

.buchen-card-actions {
  display: flex;
  gap: var(--ui-gap);
  margin-left: auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
}

.buchen-bottles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.buchen-bottles-grid .buchen-flaschen-table {
  margin-bottom: 0;
}

.buchen-multi-switch {
  margin-right: 2px;
}

.mode-actions {
  display: flex;
  gap: var(--ui-gap);
  margin-left: auto;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.mail-page .buchen-right-col > .card > .card-head {
  align-items: center;
}

.mail-page .buchen-right-col > .card > .card-head .mode-actions {
  align-items: center;
}

.mode-panel-hidden {
  display: none;
}

.abrechnen-saldo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.abrechnen-saldo-grid .card2 {
  margin-top: 0;
}

.abrechnen-summary-pills {
  display: flex;
  gap: 8px;
  margin-left: auto;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pill.pill-succ {
  background: var(--color-toast-succ);
  color: var(--text-main);
  font-weight: 600;
}

.pill.pill-main {
  background: var(--bg-main);
  color: var(--text-main);
  font-weight: 600;
}

.pill.pill-err {
  background: var(--color-toast-err);
  color: var(--text-main);
  font-weight: 600;
}

/* Make the journal PASS pill text white for better contrast */
.journal-summary-status.pill-succ {
  color: var(--color-white);
}

/* Right-align the mode-actions toggle in the Journal card header */
.journal-head .mode-actions {
  margin-left: auto;
}

.abrechnen-journal-table th:nth-child(1),
.abrechnen-journal-table td:nth-child(1) { width: 7%; }
.abrechnen-journal-table th:nth-child(2),
.abrechnen-journal-table td:nth-child(2) { width: 12%; }
.abrechnen-journal-table th:nth-child(3),
.abrechnen-journal-table td:nth-child(3) { width: 24%; }
.abrechnen-journal-table th:nth-child(4),
.abrechnen-journal-table td:nth-child(4) { width: 13%; }
.abrechnen-journal-table th:nth-child(5),
.abrechnen-journal-table td:nth-child(5) { width: 9%; }
.abrechnen-journal-table th:nth-child(6),
.abrechnen-journal-table td:nth-child(6) { width: 9%; }
.abrechnen-journal-table th:nth-child(7),
.abrechnen-journal-table td:nth-child(7) { width: 9%; }
.abrechnen-journal-table th:nth-child(8),
.abrechnen-journal-table td:nth-child(8) { width: 8%; }
.abrechnen-journal-table th:nth-child(9),
.abrechnen-journal-table td:nth-child(9) { width: 8%; }

.buchen-table tr {
  cursor: pointer;
}

.buchen-table td {
  font-size: 13px;
  padding: 0 var(--ui-gap);
  height: 28px;
  line-height: 28px;
}
.buchen-table tr.selected td {
  background: var(--bg-whisky) !important;
  color: var(--bg-white);
}

.buchen-table tbody tr:nth-child(even):not(.selected) td {
  background: var(--bg-main);
}

.buchen-table tbody tr:hover:nth-child(even):not(.selected) td {
  background: var(--bg-main);
}

.buchen-table th:nth-child(1),
.buchen-table td:nth-child(1) {
  overflow: visible;
}

.journal-table th {
  font-size: 16px;
  padding: var(--ui-gap) var(--ui-gap) 8px;
}

.journal-summary-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.journal-summary-line .summary-gap {
  margin-left: 1cm;
}

.journal-summary-status {
  margin-left: auto;
  font-weight: 600;
  min-width: 56px;
  text-align: center;
}


.journal-table th:nth-child(1),  .journal-table td:nth-child(1)  { width: 13%; }
.journal-table th:nth-child(2),  .journal-table td:nth-child(2)  { width: 7%; }
.journal-table th:nth-child(3),  .journal-table td:nth-child(3)  { width: 7%; }
.journal-table th:nth-child(4),  .journal-table td:nth-child(4)  { width: 7%; }
.journal-table th:nth-child(5),  .journal-table td:nth-child(5)  { width: 13%; }
.journal-table th:nth-child(6),  .journal-table td:nth-child(6)  { width: 6%; }
.journal-table th:nth-child(7),  .journal-table td:nth-child(7)  { width: 6%; }
.journal-table th:nth-child(8),  .journal-table td:nth-child(8)  { width: 6%; }
.journal-table th:nth-child(9),  .journal-table td:nth-child(9)  { width: 6%; }
.journal-table th:nth-child(10), .journal-table td:nth-child(10) { width: 6%; }
.journal-table th:nth-child(11), .journal-table td:nth-child(11) { width: 12%; }
.journal-table th:nth-child(12), .journal-table td:nth-child(12) { width: 10%; }
.journal-table th:nth-child(13), .journal-table td:nth-child(13) { width: 4%; }

.journal-table tbody tr:nth-child(even) td {
  background: var(--bg-main);
}

.journal-table tbody tr:hover:nth-child(even) td {
  background: var(--bg-main);
}

.dashboard-daily-table th:nth-child(1), .dashboard-daily-table td:nth-child(1) { width: 10%; }
.dashboard-daily-table th:nth-child(2), .dashboard-daily-table td:nth-child(2) { width: 15%; }
.dashboard-daily-table th:nth-child(3), .dashboard-daily-table td:nth-child(3) { width: 10%; }
.dashboard-daily-table th:nth-child(4), .dashboard-daily-table td:nth-child(4) { width: 35%; }
.dashboard-daily-table th:nth-child(5), .dashboard-daily-table td:nth-child(5) { width: 10%; }
.dashboard-daily-table th:nth-child(6), .dashboard-daily-table td:nth-child(6) { width: 10%; }

.modal-overlay-high {
  z-index: 99999;
}

.dashboard-modal-content {
  max-width: 730px;
  width: 95%;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dashboard-modal-meta {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-main);
}

.dashboard-modal-meta-text {
  color: var(--text-muted);
  font-size: 0.85em;
}

.dashboard-modal-groups {
  overflow-y: auto;
  flex: 1;
  padding: 16px;
  background: var(--bg-main);
}

.stammdaten-modal-overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99999;
}

.stammdaten-modal-overlay.is-open {
  display: flex;
}

.stammdaten-modal-panel {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 16px;
  min-width: 360px;
  max-width: 760px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.stammdaten-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.stammdaten-modal-head h3 {
  margin: 0;
}

.stammdaten-modal-close-wrap {
  margin-left: auto;
}

.stammdaten-modal-body {
  max-height: 400px;
  overflow: auto;
  margin-bottom: 12px;
}

.stammdaten-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.stammdaten-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}

.stammdaten-row-label {
  width: 220px;
  font-weight: 600;
}

.stammdaten-row-input {
  flex: 1;
}

.stammdaten-row-input input {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--btn-border);
  border-radius: 6px;
}

.stammdaten-separator {
  height: 8px;
}

.buchen-people-table th:nth-child(1), .buchen-people-table td:nth-child(1) { width: 50%; }
.buchen-people-table th:nth-child(2), .buchen-people-table td:nth-child(2) { width: 50%; }

.menu-log-table th:nth-child(1), .menu-log-table td:nth-child(1) { width: 100%; }

.menu-log-detail-btn {
  cursor: pointer;
  margin-right: 6px;
  font-size: 13px;
  opacity: 0.6;
  vertical-align: middle;
  user-select: none;
}
.menu-log-detail-btn:hover {
  opacity: 1;
}

.menu-log-table td {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.menu-log-table .menu-log-detail-btn {
  flex: 0 0 auto;
  margin-right: 0;
}

.menu-log-table .menu-log-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardMenuLogTable th:nth-child(1), #dashboardMenuLogTable td:nth-child(1) { width: 11%; }
#dashboardMenuLogTable th:nth-child(2), #dashboardMenuLogTable td:nth-child(2) { width: 4%; text-align: center; }
#dashboardMenuLogTable th:nth-child(3), #dashboardMenuLogTable td:nth-child(3) { width: 10%; }
#dashboardMenuLogTable th:nth-child(4), #dashboardMenuLogTable td:nth-child(4) { width: 28%; }
#dashboardMenuLogTable th:nth-child(5), #dashboardMenuLogTable td:nth-child(5) { width: 41%; }
#dashboardMenuLogTable th:nth-child(6), #dashboardMenuLogTable td:nth-child(6) { width: 6%; }

#dashboardMenuLogTable:not(.is-edit-mode) th:nth-child(1),
#dashboardMenuLogTable:not(.is-edit-mode) td:nth-child(1) { width: 9%; }

#dashboardMenuLogTable:not(.is-edit-mode) th:nth-child(5),
#dashboardMenuLogTable:not(.is-edit-mode) td:nth-child(5) { width: 43%; }

#dashboardMenuLogTable.is-edit-mode th:nth-child(1),
#dashboardMenuLogTable.is-edit-mode td:nth-child(1) { width: 12%; }

#dashboardMenuLogTable.is-edit-mode th:nth-child(5),
#dashboardMenuLogTable.is-edit-mode td:nth-child(5) { width: 40%; }


.dashboard-menu-nr-cell {
  text-align: center;
}

.dashboard-menu-edit-input {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: inherit;
}

.dashboard-menu-edit-nr {
  text-align: center;
}

#mobileDashboardMenuLogTable th:nth-child(1), #mobileDashboardMenuLogTable td:nth-child(1) { width: 10%; }
#mobileDashboardMenuLogTable th:nth-child(2), #mobileDashboardMenuLogTable td:nth-child(2) { width: 10%; }
#mobileDashboardMenuLogTable th:nth-child(3), #mobileDashboardMenuLogTable td:nth-child(3) { width: 20%; }
#mobileDashboardMenuLogTable th:nth-child(4), #mobileDashboardMenuLogTable td:nth-child(4) { width: 30%; }
#mobileDashboardMenuLogTable th:nth-child(5), #mobileDashboardMenuLogTable td:nth-child(5) { width: 30%; }

#mobileDashboardMenuLogTable td,
.mobile-dashboard-messages-table td {
  height: 20px;
  line-height: 20px;
}

#mobileDashboardMessagesBody td {
  height: 20px;
  line-height: 20px;
}

.mobile-dashboard-messages-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#mobileDashboardMenuLogTable th,
.mobile-dashboard-messages-table th {
  padding: 1px var(--ui-gap) 5px;
}

.mobile-app.mobile-flaschen-page .flaschen-table td,
.mobile-app.mobile-saldo-page .abrechnen-journal-table td {
  height: 20px;
  line-height: 20px;
}

.mobile-app.mobile-flaschen-page .flaschen-table th,
.mobile-app.mobile-saldo-page .abrechnen-journal-table th {
  padding: 1px var(--ui-gap) 5px;
}

.mobile-app.mobile-flaschen-page .journal-table.flaschen-table th:nth-child(1),
.mobile-app.mobile-flaschen-page .journal-table.flaschen-table td:nth-child(1) { width: 24% !important; }
.mobile-app.mobile-flaschen-page .journal-table.flaschen-table th:nth-child(2),
.mobile-app.mobile-flaschen-page .journal-table.flaschen-table td:nth-child(2) { width: 44% !important; }
.mobile-app.mobile-flaschen-page .journal-table.flaschen-table th:nth-child(3),
.mobile-app.mobile-flaschen-page .journal-table.flaschen-table td:nth-child(3) { width: 16% !important; }
.mobile-app.mobile-flaschen-page .journal-table.flaschen-table th:nth-child(4),
.mobile-app.mobile-flaschen-page .journal-table.flaschen-table td:nth-child(4) { width: 16% !important; }

#menuLogBody tr[draggable="true"] {
  cursor: grab;
}

#menuLogBody tr[draggable="true"]:active {
  cursor: grabbing;
}

#menuLogBody tr.menu-log-row-dragging {
  opacity: 0.5;
}

#menuLogBody tr.menu-log-row-over td {
  outline: 2px dashed var(--btn-bg-2);
  outline-offset: -2px;
}

.buchen-page .buchen-flaschen-table th:nth-child(1), .buchen-page .buchen-flaschen-table td:nth-child(1) { width: 22%; }
.buchen-page .buchen-flaschen-table th:nth-child(2), .buchen-page .buchen-flaschen-table td:nth-child(2) { width: 63%; }
.buchen-page .buchen-flaschen-table th:nth-child(3), .buchen-page .buchen-flaschen-table td:nth-child(3) { width: 15%; }

.menu-page .buchen-flaschen-table th:nth-child(1), .menu-page .buchen-flaschen-table td:nth-child(1) { width: 22%; }
.menu-page .buchen-flaschen-table th:nth-child(2), .menu-page .buchen-flaschen-table td:nth-child(2) { width: 63%; }
.menu-page .buchen-flaschen-table th:nth-child(3), .menu-page .buchen-flaschen-table td:nth-child(3) { width: 15%; }

@media (max-width: 1180px) {
  .buchen-bottles-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.journal-page .journal-table th:nth-child(6), .journal-page .journal-table td:nth-child(6) { width: 10%; }

.filters input[type="text"],
.filters select {
  padding: 0 var(--ui-gap);
  font-size: 13px;
  line-height: 1;
  height: 28px;
  margin: 0;
  border-radius: 6px;
}

.filters button {
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
  margin: 0;
  background: var(--btn-bg-2);
}

.filters button:hover {
  background: var(--btn-bg-2);
}

#journalExportBtn,
#journalResetBtn {
  width: 120px;
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

/* =========================
 * Status / Pills
 * ========================= */

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: var(--bg-medium);
  font-size: 12px;
  color: var(--text-muted);
}

.pill.whisky {
  background: var(--btn-selected);
  color: var(--color-whisky);
  font-weight: 600;
}

.pill.zero {
  background: var(--color-black);
  color: var(--color-black);
  font-weight: 600;
}

.pill.neutral {
  background: var(--color-black) !important;
  color: var(--color-black) !important;
  font-weight: 500;
}


/* =========================
 * Spezifische Blöcke
 * ========================= */

.qrbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.scanner-card .card-head {
  margin-bottom: 0px;
}

.foto-card .card-head {
  margin-bottom: 0;
}

.foto-request-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.foto-request-box {
  background: var(--bg-card, #fff);
  border-radius: 16px;
  padding: 24px 20px;
  max-width: 320px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.flaschen-edit-box {
  max-width: 480px;
  gap: 10px;
}

.flaschen-edit-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
}

.foto-request-box p {
  margin: 0;
  font-size: 1.05rem;
  text-align: center;
}

.neuer-dram-dialog {
  max-width: 360px;
  gap: 8px;
}

.neuer-dram-dialog label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 4px;
}

.neuer-dram-dialog input,
.neuer-dram-dialog select {
  width: 100%;
  box-sizing: border-box;
}

.neuer-dram-card .card-head {
  margin-bottom: 0;
}

.neuer-dram-dialog {
  max-width: 360px;
  gap: 8px;
}

.neuer-dram-dialog label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 4px;
}

.neuer-dram-dialog input,
.neuer-dram-dialog select {
  width: 100%;
  box-sizing: border-box;
}

.neuer-dram-header {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-whisky);
  margin: 0 0 4px;
}

.neuer-dram-hint {
  font-size: 1.2rem;
  text-align: left;
}

.neuer-dram-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.neuer-dram-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.neuer-dram-col label {
  margin-top: 0 !important;
}

.neuer-dram-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

#ndActionBtn:disabled {
  opacity: 0.45;
  color: var(--text-main) !important;
  cursor: not-allowed;
}

.scanner-foto-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}

.scanner-foto-row > .card {
  margin-bottom: 0;
}

.foto-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.foto-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg-subtle, #f5f5f5);
  border: 1px dashed var(--border-medium);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.foto-placeholder-icon {
  font-size: 2rem;
  opacity: 0.4;
}

.foto-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.foto-action-btn {
  width: 100%;
}

.qrimg {
  width: 260px;
  height: 260px;
  background: #fff;
  border: 1px solid var(--border-medium);
  border-radius: 14px;
}

.scan-panel.hidden {
  display: none;
}

.scan-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scan-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  overflow: hidden;
}

.scan-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 58%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
}

.scan-video {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  background: #111;
  border: 1px solid var(--border-medium);
}

.scan-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.pay-last {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.pay-last .hint {
  line-height: 1;
}

.col-id {
  width: 90px;
  font-size: 12px;
  color: var(--bg-medium);
  white-space: nowrap;
}

.col-price {
  text-align: right;
  width: 90px;
  font-weight: 600;
}

#message {
  margin-top: 10px;
  font-weight: bold;
  color: var(--color-error);
}

/* =========================
 * Mobile Dashboard
 * ========================= */

.mobile-app {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.mobile-app .card {
  width: 100%;
  max-width: none;
}

.mobile-app .actions,
.mobile-app .row {
  gap: 10px;
}

.mobile-app .pill {
  white-space: nowrap;
}

.mobile-app h2 {
  font-size: 20px;
}

#msVideo {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
}

.field {
  background: #fafafa;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  padding: 12px;
}

.field .label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field .value {
  font-size: 18px;
  font-weight: bold;
  word-break: break-word;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#detailContent,
#detailContentFlaschen,
#detailContentDrams {
  display: grid;
  gap: 4px;
}

.mobile-app.mobile-flasche-detail-page #detailContent .field,
.mobile-app.mobile-flasche-detail-page #detailContentFlaschen .field,
.mobile-app.mobile-flasche-detail-page #detailContentDrams .field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 6px;
}

.mobile-app.mobile-flasche-detail-page #detailContent .field .label,
.mobile-app.mobile-flasche-detail-page #detailContentFlaschen .field .label,
.mobile-app.mobile-flasche-detail-page #detailContentDrams .field .label {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.mobile-app.mobile-flasche-detail-page #detailContent .field .value,
.mobile-app.mobile-flasche-detail-page #detailContentFlaschen .field .value,
.mobile-app.mobile-flasche-detail-page #detailContentDrams .field .value {
  flex: 1 1 auto;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
}

.mobile-app.mobile-flasche-detail-page .mobile-detail-field-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.mobile-app.mobile-flasche-detail-page .mobile-detail-field-value-text {
  display: inline-block;
}

.mobile-app.mobile-flasche-detail-page #detailBackBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  box-sizing: border-box;
  gap: 6px;
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
  text-align: center;
}

#etikettCard {
  padding: 0;
  overflow: hidden;
}

#etikettCard img {
  width: 100%;
  display: block;
}

.mobile-flasche-detail-link-btn {
  width: auto;
  display: inline-flex;
  text-decoration: none;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--color-accent2);
  color: var(--text-main);
  border-color: var(--btn-border);
}

.mobile-flasche-detail-link-btn:hover {
  background: var(--color-accent1);
}

.owner-edit-form {
  display: grid;
  gap: 10px;
}

.owner-edit-form .field,
.mobile-app.mobile-flasche-detail-page #detailContent .owner-edit-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  justify-content: flex-start;
}

.owner-edit-form .field .label,
.mobile-app.mobile-flasche-detail-page #detailContent .owner-edit-form .field .label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: unset;
  min-width: unset;
}

.owner-edit-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.owner-edit-form .modal-input,
.mobile-app.mobile-flasche-detail-page #detailContent .owner-edit-form .modal-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-whisky);
  color: var(--text-main);
  background-color: var(--bg-card);
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 3px;
  font-family: inherit;
}

.owner-idwb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: center;
}

.owner-idwb-row .modal-input {
  min-width: 0;
}

.owner-idwb-row .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  background-color: var(--color-accent2);
  color: var(--bg-dark);
  border-color: var(--color-accent2);
}

.owner-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 6px;
}

.owner-edit-actions .btn-save {
  background-color: var(--color-accent1);
  color: var(--bg-dark);
  font-weight: 600;
  border: none;
}

.owner-edit-actions .btn-save:hover {
  background-color: var(--color-accent2);
}

.mobile-detail-duplicate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
}

.mobile-card-edit-row {
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
}

.mobile-card-edit-btn {
  background-color: var(--color-accent1);
  color: var(--text-main);
  border-color: var(--btn-border);
}

.mobile-card-edit-btn:hover {
  background-color: var(--color-accent2);
}

.mobile-card-edit-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.mobile-detail-duplicate-btn {
  background-color: var(--color-accent1);
  color: var(--text-main);
  border-color: var(--btn-border);
}

.mobile-detail-duplicate-btn:hover {
  background-color: var(--color-accent2);
}

.mobile-detail-chart-card {
  overflow: hidden;
}

.mobile-detail-chart-shell {
  display: grid;
  gap: 10px;
}

.mobile-detail-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.mobile-detail-chart-grid {
  stroke: color-mix(in srgb, var(--bg-medium) 55%, transparent);
  stroke-width: 1;
}

.mobile-detail-chart-axis {
  stroke: var(--text-main);
  stroke-width: 1.5;
}

.mobile-detail-chart-tick,
.mobile-detail-chart-axis-label {
  fill: var(--text-main);
  font-size: 11px;
}

.mobile-detail-chart-axis-label {
  font-weight: 600;
}

.mobile-detail-chart-mean-line {
  stroke: var(--text-main);
  stroke-width: 2;
  stroke-linecap: round;
}

.mobile-detail-chart-point {
  background: var(--bg-medium);
  fill: var(--bg-medium);
  stroke: var(--bg-medium);
  stroke-width: 1.5;
  cursor: pointer;
}

.mobile-detail-chart-point:focus {
  outline: none;
  stroke: var(--bg-dark);
  stroke-width: 2.5;
}

.mobile-detail-chart-point.is-blind,
.mobile-detail-chart-legend-dot.is-blind {
  fill: var(--color-white);
  background: var(--color-white);
  stroke: var(--bg-medium);
  border: 1.5px solid var(--bg-medium);
}

.mobile-detail-chart-point.is-own {
  fill: var(--color-accent1);
  stroke: var(--color-accent1);
  stroke-width: 1.8;
}

.mobile-detail-chart-point.is-own.is-blind {
  fill: var(--color-white);
  stroke: var(--color-accent1);
}

.mobile-detail-chart-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.mobile-detail-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-main);
}

.mobile-detail-chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-medium);
}

.mobile-detail-chart-legend-dot.is-blind {
  width: 10px;
  height: 10px;
}

.mobile-detail-chart-legend-square {
  width: 10px;
  height: 10px;
  background: var(--color-accent1);
  border: 1.8px solid var(--color-accent1);
}

.mobile-detail-chart-legend-square.is-blind {
  width: 10px;
  height: 10px;
  background: var(--color-white);
  border-color: var(--color-accent1);
}

.mobile-detail-radar-shell {
  gap: 12px;
}

.mobile-detail-radar-svg {
  overflow: visible;
}

.mobile-detail-radar-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--bg-medium) 55%, transparent);
  stroke-width: 1;
}

.mobile-detail-radar-axis {
  stroke: var(--text-main);
  stroke-width: 1;
}

.mobile-detail-radar-label,
.mobile-detail-radar-tick {
  fill: var(--text-main);
  font-size: 10px;
}

.mobile-detail-radar-series {
  fill: color-mix(in srgb, var(--bg-medium) 14%, transparent);
  stroke: var(--bg-medium);
  stroke-width: 1.4;
}

.mobile-detail-radar-series.is-own {
  fill: color-mix(in srgb, var(--color-accent1) 14%, transparent);
  stroke: var(--color-accent1);
}

.mobile-detail-radar-series.is-blind {
  fill: transparent;
  stroke-dasharray: 4 3;
}

.mobile-detail-chart-legend-cross {
  position: relative;
  width: 12px;
  height: 12px;
}

.mobile-detail-chart-legend-cross::before,
.mobile-detail-chart-legend-cross::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: 2px;
  height: 12px;
  background: var(--color-error);
  border-radius: 999px;
}

.mobile-detail-chart-legend-cross::before {
  transform: rotate(45deg);
}

.mobile-detail-chart-legend-cross::after {
  transform: rotate(-45deg);
}

.notes {
  white-space: pre-wrap;
  line-height: 1.5;
}

/* saldo/histsaldo columns — right-aligned numbers */
th.col-saldo, td.col-saldo { width: 7%; min-width: 87px; text-align: right; }
th.col-histsaldo, td.col-histsaldo { width: 7%; min-width: 87px; text-align: right; }
td.col-saldo input, td.col-histsaldo input { text-align: right; }

/* hide table columns marked as col-hidden */
col.col-hidden,
th.col-hidden,
td.col-hidden { display: none; }

/* compact table variant: no row lines, tighter padding */
.table-compact td {
  border-bottom: none;
  padding: 0 var(--ui-gap);
  vertical-align: middle;
  height: 28px;
  line-height: 28px;
}
.table-compact th {
  padding: var(--ui-gap) var(--ui-gap) 8px;
}
.table-compact .inline-input,
.table-compact .inline-select {
  padding: 0 var(--ui-gap);
  font-size: 13px;
  line-height: 1;
  height: 28px;
  margin: 0;
}

/* enforce uniform font-size inside tables */
table, table th, table td, table input, table select { font-size: 13px; }

/* Override: make table headers match h3 (16px) as requested */
table th,
.table-compact th {
  font-size: 16px;
}

/* Fixed layout and column widths for compact tables (people list) */
.table-compact {
  table-layout: fixed;
  width: 100%;
}

/* Ensure overflowing cell content is truncated */
.table-compact th,
.table-compact td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Allow tooltips in ID and actions columns to overflow adjacent cells */
.table-compact th:nth-child(10),
.table-compact th:nth-child(1),
.table-compact td:nth-child(1),
.table-compact td:nth-child(10) {
  overflow: visible;
  text-overflow: clip;
}

.people-table th:nth-child(11),
.people-table td:nth-child(11) {
  overflow: visible;
  text-overflow: clip;
}

.flaschen-table th:nth-child(8),
.flaschen-table td:nth-child(8) {
  overflow: visible;
  text-overflow: clip;
}


.table-compact td:nth-child(1),
.table-compact td:nth-child(1) .left-icon,
.table-compact td:nth-child(1) .action-icon,
.table-compact td:nth-child(10),
.table-compact td:nth-child(10) .actions,
.table-compact td:nth-child(10) .action-icon {
  position: relative;
  overflow: visible;
}

.people-table td:nth-child(11),
.people-table td:nth-child(11) .actions,
.people-table td:nth-child(11) .action-icon {
  position: relative;
  overflow: visible;
}

.flaschen-table td:nth-child(8),
.flaschen-table td:nth-child(8) .flaschen-sponsor-cell,
.flaschen-table td:nth-child(8) .flaschen-rating-star {
  position: relative;
  overflow: visible;
}

.flaschen-rating-star span[aria-hidden] {
  color: var(--color-accent3);
}

#peopleEditPanel .people-table td:nth-child(3),
#flaschenEditPanel .flaschen-table td:nth-child(7) {
  position: relative;
  overflow: visible;
  z-index: 2;
}

#peopleEditPanel .people-table td.select-open,
#flaschenEditPanel .flaschen-table td.select-open {
  overflow: visible;
  z-index: 10001;
}

#peopleEditPanel .people-table td:nth-child(3):hover,
#flaschenEditPanel .flaschen-table td:nth-child(7):hover {
  z-index: 10000;
}

/* Ensure tooltip can layer above neighboring rows (including the row above) */
.table-compact td:nth-child(1),
.table-compact td:nth-child(10) {
  z-index: 1;
}

#flaschenEditPanel .flaschen-table td:nth-child(11) {
  z-index: 1;
}

.people-table td:nth-child(11) {
  z-index: 1;
}

.flaschen-table td:nth-child(8) {
  z-index: 1;
}

.table-compact td:nth-child(1):hover,
.table-compact td:nth-child(1):hover .left-icon,
.table-compact td:nth-child(1):hover .action-icon,
.table-compact td:nth-child(10):hover,
.table-compact td:nth-child(10):hover .actions,
.table-compact td:nth-child(10):hover .action-icon {
  z-index: 10000;
}

.people-table td:nth-child(11):hover,
.people-table td:nth-child(11):hover .actions,
.people-table td:nth-child(11):hover .action-icon {
  z-index: 10000;
}

.flaschen-table td:nth-child(8):hover,
.flaschen-table td:nth-child(8):hover .flaschen-sponsor-cell,
.flaschen-table td:nth-child(8):hover .flaschen-rating-star,
#flaschenEditPanel .flaschen-table td:nth-child(11):hover,
#flaschenEditPanel .flaschen-table td:nth-child(11):hover .actions,
#flaschenEditPanel .flaschen-table td:nth-child(11):hover .action-icon {
  z-index: 10000;
}

#flaschenEditPanel .flaschen-table tbody tr {
  position: relative;
  z-index: 0;
}
#flaschenEditPanel .flaschen-table tbody tr:hover {
  z-index: 10001;
}
#flaschenEditPanel .flaschen-table tbody tr:hover .action-tooltip {
  z-index: 10002;
}

#flaschenEditPanel .flaschen-table td:nth-child(11),
#flaschenEditPanel .flaschen-table td:nth-child(11) .actions,
#flaschenEditPanel .flaschen-table td:nth-child(11) .action-icon {
  position: relative;
  overflow: visible;
}

#flaschenReadonlyPanel .flaschen-table td:last-child,
#flaschenReadonlyPanel .flaschen-table td:last-child .actions,
#flaschenReadonlyPanel .flaschen-table td:last-child .action-icon,
#flaschenEditPanel .flaschen-table td:last-child,
#flaschenEditPanel .flaschen-table td:last-child .actions,
#flaschenEditPanel .flaschen-table td:last-child .action-icon {
  position: relative;
  overflow: visible;
}

#flaschenReadonlyPanel .flaschen-table td:last-child,
#flaschenEditPanel .flaschen-table td:last-child {
  z-index: 1;
}

#flaschenReadonlyPanel .flaschen-table td:last-child:hover,
#flaschenReadonlyPanel .flaschen-table td:last-child:hover .actions,
#flaschenReadonlyPanel .flaschen-table td:last-child:hover .action-icon,
#flaschenEditPanel .flaschen-table td:last-child:hover,
#flaschenEditPanel .flaschen-table td:last-child:hover .actions,
#flaschenEditPanel .flaschen-table td:last-child:hover .action-icon {
  z-index: 10000;
}

#flaschenReadonlyPanel .flaschen-table tbody tr {
  position: relative;
  z-index: 0;
}

#flaschenReadonlyPanel .flaschen-table tbody tr:hover {
  z-index: 10001;
}

#flaschenReadonlyPanel .flaschen-table tbody tr:hover .action-tooltip {
  z-index: 10002;
}

/* People table column width plan (sums to 100%) */
.people-table th:nth-child(1), .people-table td:nth-child(1) { width: 10%; }
.people-table th:nth-child(2), .people-table td:nth-child(2) { width: 10%; }
.people-table th:nth-child(3), .people-table td:nth-child(3) { width: 6%; }
.people-table th:nth-child(4), .people-table td:nth-child(4) { width: 10%; }
.people-table th:nth-child(5), .people-table td:nth-child(5) { width: 12%; }
.people-table th:nth-child(6), .people-table td:nth-child(6) { width: 10%; }
.people-table th:nth-child(7), .people-table td:nth-child(7) { width: 10%; }
.people-table th:nth-child(8), .people-table td:nth-child(8) { width: 7%; }
.people-table th:nth-child(9), .people-table td:nth-child(9) { width: 7%; }
.people-table th:nth-child(10), .people-table td:nth-child(10) { width: 8%; }
.people-table th:nth-child(11), .people-table td:nth-child(11) { width: 12%; }

/* Edit table */
#peopleEditPanel .people-table th:nth-child(6),
#peopleEditPanel .people-table td:nth-child(6) { width: 19%; }
#peopleEditPanel .people-table th:nth-child(7),
#peopleEditPanel .people-table td:nth-child(7) { width: 7%; }
#peopleEditPanel .people-table th:nth-child(3),
#peopleEditPanel .people-table td:nth-child(3) { width: 8.2%; }
#peopleEditPanel .people-table th:nth-child(9),
#peopleEditPanel .people-table td:nth-child(9) { width: 6%; }
#peopleEditPanel .people-table th:nth-child(5),
#peopleEditPanel .people-table td:nth-child(5) { width: 10%; }
#peopleEditPanel .people-table th:nth-child(11),
#peopleEditPanel .people-table td:nth-child(11) { width: 9%; }

/* View table override: show role column and keep readable proportions */
#peopleReadonlyPanel .people-table th:nth-child(1),
#peopleReadonlyPanel .people-table td:nth-child(1) { width: 10%; }
#peopleReadonlyPanel .people-table th:nth-child(2),
#peopleReadonlyPanel .people-table td:nth-child(2) { width: 11%; }
#peopleReadonlyPanel .people-table th:nth-child(3),
#peopleReadonlyPanel .people-table td:nth-child(3) { width: 10%; }
#peopleReadonlyPanel .people-table th:nth-child(4),
#peopleReadonlyPanel .people-table td:nth-child(4) { width: 11%; }
#peopleReadonlyPanel .people-table th:nth-child(5),
#peopleReadonlyPanel .people-table td:nth-child(5) { width: 12%; }
#peopleReadonlyPanel .people-table th:nth-child(6),
#peopleReadonlyPanel .people-table td:nth-child(6) { width: 21%; }
#peopleReadonlyPanel .people-table th:nth-child(7),
#peopleReadonlyPanel .people-table td:nth-child(7) { width: 8%; }
#peopleReadonlyPanel .people-table th:nth-child(8),
#peopleReadonlyPanel .people-table td:nth-child(8) { width: 8.5%; }
#peopleReadonlyPanel .people-table th:nth-child(9),
#peopleReadonlyPanel .people-table td:nth-child(9) { width: 8.5%; }

/* Readonly panel column widths */
#flaschenReadonlyPanel .flaschen-table {
  border-collapse: separate;
  border-spacing: 0;
}

#flaschenReadonlyPanel .flaschen-table th:nth-child(1),
#flaschenReadonlyPanel .flaschen-table td:nth-child(1) { width: 7%; }
#flaschenReadonlyPanel .flaschen-table th:nth-child(2),
#flaschenReadonlyPanel .flaschen-table td:nth-child(2) { width: 6%; }
#flaschenReadonlyPanel .flaschen-table th:nth-child(3),
#flaschenReadonlyPanel .flaschen-table td:nth-child(3) { width: 6%; }
#flaschenReadonlyPanel .flaschen-table th:nth-child(4),
#flaschenReadonlyPanel .flaschen-table td:nth-child(4) { width: 6%; }
#flaschenReadonlyPanel .flaschen-table th:nth-child(5),
#flaschenReadonlyPanel .flaschen-table td:nth-child(5) { width: 12%; }
#flaschenReadonlyPanel .flaschen-table th:nth-child(6),
#flaschenReadonlyPanel .flaschen-table td:nth-child(6) { width: 12%; }
#flaschenReadonlyPanel .flaschen-table th:nth-child(7),
#flaschenReadonlyPanel .flaschen-table td:nth-child(7) { width: 21%; }
#flaschenReadonlyPanel .flaschen-table th:nth-child(8),
#flaschenReadonlyPanel .flaschen-table td:nth-child(8) { width: 5%; }
#flaschenReadonlyPanel .flaschen-table th:nth-child(9),
#flaschenReadonlyPanel .flaschen-table td:nth-child(9) { width: 10%; }

#flaschenReadonlyPanel .flaschen-table th:last-child,
#flaschenReadonlyPanel .flaschen-table td:last-child { width: 10%; }
#flaschenReadonlyPanel .flaschen-table th[data-sort="status"],
#flaschenReadonlyPanel .flaschen-table td[data-sort="status"] { width: 6%; }


#flaschenEditPanel .flaschen-table td:last-child,
#flaschenEditPanel .flaschen-table th:last-child { width: 22%; }



#flaschenReadonlyPanel .flaschen-table td.flaschen-sponsor-cell {
  vertical-align: middle;
}

.flaschen-table td,
#flaschenReadonlyPanel .flaschen-table td,
#flaschenEditPanel .flaschen-table td {
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}

#flaschenReadonlyPanel .flaschen-table th,
#flaschenReadonlyPanel .flaschen-table td,
#flaschenEditPanel .flaschen-table th,
#flaschenEditPanel .flaschen-table td {
  font-size: 13px;
}

#flaschenReadonlyPanel .flaschen-table td:last-child .actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
}

#flaschenReadonlyPanel .flaschen-table td:last-child,
#flaschenReadonlyPanel .flaschen-table td:last-child .actions,
#flaschenReadonlyPanel .flaschen-table td:last-child .action-icon {
  position: relative;
  overflow: visible;
}

#flaschenReadonlyPanel .flaschen-table td:last-child .action-icon {
  width: 20px;
  height: 20px;
  line-height: 20px;
}

#flaschenReadonlyPanel .flaschen-table th.col-abfueller,
#flaschenReadonlyPanel .flaschen-table td.col-abfueller {
  width: 12%;
}

#flaschenEditPanel .flaschen-table th.col-abfueller,
#flaschenEditPanel .flaschen-table td.col-abfueller {
  width: 12%;
}

#flaschenReadonlyPanel .flaschen-table th.col-destillerie,
#flaschenReadonlyPanel .flaschen-table td.col-destillerie,
#flaschenEditPanel .flaschen-table th.col-destillerie,
#flaschenEditPanel .flaschen-table td.col-destillerie {
  width: 12%;
}

#flaschenReadonlyPanel .flaschen-table th.col-flaschenname,
#flaschenReadonlyPanel .flaschen-table td.col-flaschenname {
  width: 16%;
}



#flaschenReadonlyPanel .flaschen-table th.col-id-dram,
#flaschenReadonlyPanel .flaschen-table td.col-id-dram,
#flaschenEditPanel .flaschen-table th.col-id-dram,
#flaschenEditPanel .flaschen-table td.col-id-dram {
  width: 6%;
}

#flaschenReadonlyPanel .flaschen-table th.col-dram-key,
#flaschenReadonlyPanel .flaschen-table td.col-dram-key,
#flaschenEditPanel .flaschen-table th.col-dram-key,
#flaschenEditPanel .flaschen-table td.col-dram-key {
  width: 9%;
}

#flaschenReadonlyPanel .flaschen-table th.col-preis,
#flaschenReadonlyPanel .flaschen-table td.col-preis {
  width: 8%;
}

#flaschenEditPanel .flaschen-table th.col-preis,
#flaschenEditPanel .flaschen-table td.col-preis {
  width: 6%;
}

#flaschenReadonlyPanel .flaschen-table th.col-sponsor,
#flaschenReadonlyPanel .flaschen-table td.col-sponsor {
  width: 8%;
}

#flaschenEditPanel .flaschen-table th.col-sponsor,
#flaschenEditPanel .flaschen-table td.col-sponsor {
  width: 12%;
}

#flaschenReadonlyPanel .flaschen-table th.col-uvp,
#flaschenReadonlyPanel .flaschen-table td.col-uvp,
#flaschenEditPanel .flaschen-table th.col-uvp,
#flaschenEditPanel .flaschen-table td.col-uvp {
  width: 8%;
}

#flaschenReadonlyPanel .flaschen-table th.col-abfueller,
#flaschenReadonlyPanel .flaschen-table td.col-abfueller,
#flaschenReadonlyPanel .flaschen-table th.col-destillerie,
#flaschenReadonlyPanel .flaschen-table td.col-destillerie,
#flaschenReadonlyPanel .flaschen-table th.col-flaschenname,
#flaschenReadonlyPanel .flaschen-table td.col-flaschenname,
#flaschenEditPanel .flaschen-table th.col-abfueller,
#flaschenEditPanel .flaschen-table td.col-abfueller,
#flaschenEditPanel .flaschen-table th.col-destillerie,
#flaschenEditPanel .flaschen-table td.col-destillerie,
#flaschenEditPanel .flaschen-table th.col-flaschenname,
#flaschenEditPanel .flaschen-table td.col-flaschenname {
  text-align: left;
}

#flaschenEditPanel .flaschen-table td.col-abfueller .inline-input,
#flaschenEditPanel .flaschen-table td.col-destillerie .inline-input,
#flaschenEditPanel .flaschen-table td.col-flaschenname .inline-input {
  text-align: left;
}

#flaschenReadonlyPanel .flaschen-rating-star {
  position: absolute;
  right: 2px;
  top: 2px;
  transform: none;
}

#flaschenReadonlyPanel .flaschen-rating-action {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
}

#flaschenReadonlyPanel .flaschen-rating-action .action-tooltip {
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
}

/* Edit panel column widths */
#flaschenEditPanel .flaschen-table {
  table-layout: fixed;
  width: 100%;
}


#flaschenEditPanel .flaschen-table thead th[data-sort="id_flasche"],
#flaschenEditPanel .flaschen-table tbody td:nth-child(1) { width: 7%; }

#flaschenEditPanel .flaschen-table thead th[data-sort="id_wb"],
#flaschenEditPanel .flaschen-table tbody td:nth-child(2) { width: 6%; }

#flaschenEditPanel .flaschen-table thead th[data-sort="woo_id"],
#flaschenEditPanel .flaschen-table tbody td:nth-child(3) { width: 6%; }

#flaschenEditPanel .flaschen-table th.col-flaschenname,
#flaschenEditPanel .flaschen-table td.col-flaschenname {width: 21%;}

#flaschenEditPanel .flaschen-table thead th[data-sort="preis"],
#flaschenEditPanel .flaschen-table tbody td:nth-child(18) { width: 5%; }

#flaschenEditPanel .flaschen-table thead th[data-sort="uvp"],
#flaschenEditPanel .flaschen-table tbody td:nth-child(19) { width: 6%; }

#flaschenEditPanel .flaschen-table thead th[data-sort="status"],
#flaschenEditPanel .flaschen-table tbody td:nth-child(20) { width: 6%; }

#flaschenEditPanel .flaschen-table thead th[data-sort="id_sponsor"],
#flaschenEditPanel .flaschen-table tbody td:nth-child(21) { width: 8%; }


#flaschenEditPanel .flaschen-table tbody td:nth-child(22) { width: 0%; } /* Verkauft (hidden) */
#flaschenEditPanel .flaschen-table tbody td:nth-child(23) { width: 0%; } /* Vorverkauf (hidden) */

#flaschenEditPanel .flaschen-table thead th:last-child,
#flaschenEditPanel .flaschen-table tbody td:nth-child(24) { width: 10%; text-align: right; } /* Aktionen */

#flaschenEditPanel .flaschen-table td:nth-child(1) .inline-input {
  width: 100%;
}

.flaschen-sponsor-cell {
  position: relative;
  padding-right: 18px;
}

.flaschen-sponsor-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flaschen-rating-star {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-whisky);
}

.flaschen-rating-star span[aria-hidden] {
  line-height: 1;
  font-size: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  display: inline-block;
}

#flaschenEditPanel .flaschen-table td:nth-child(6) input {
  text-align: center;
}

.journal-export-btn {
  background: var(--color-accent3);
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--btn-border);
  cursor: pointer;
  margin-left: auto;
}

.btn-accent3 {
  background: var(--color-accent3);
}

.login-wrap {
  max-width: 520px;
  padding-top: 40px;
}

.login-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.login-title .brand-icon {
  width: 1.1em;
  height: 1.1em;
}

.login-disclaimer-card {
  margin-top: 18px;
}

.login-disclaimer-card h2 {
  margin-bottom: 12px;
}

.login-disclaimer-card h3 {
  margin: 18px 0 6px;
  font-size: 0.95rem;
  color: var(--color-whisky);
}

.login-disclaimer-card p {
  margin: 0 0 12px;
  line-height: 1.5;
}

.login-disclaimer-lead {
  font-weight: 600;
}

.login-disclaimer-list {
  margin: 0 0 12px 20px;
  padding: 0;
}

.login-disclaimer-list li {
  margin-bottom: 8px;
  line-height: 1.45;
}

.login-field-sm-gap {
  margin-bottom: 12px;
}

.login-field-lg-gap {
  margin-bottom: 18px;
}

.mobile-saldo-loading-hint {
  padding: 0 0 8px;
}

.mobile-flasche-actions-card {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
}

.mobile-flasche-action-btn {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-accent1);
  color: var(--text-main);
  border-color: var(--btn-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-flasche-action-btn:hover {
  background: var(--color-accent2);
}

.zahlung-controls-row {
  display: flex;
  gap: var(--ui-gap);
  align-items: center;
  flex-wrap: wrap;
}

.zahlung-gap {
  display: inline-block;
  width: var(--ui-gap);
}

.zahlung-notiz-input {
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  flex: 1;
  min-width: 120px;
  color: var(--text-main);
  -webkit-text-fill-color: var(--text-main);
  caret-color: var(--text-main);
}

.mobile-app #flaschenReadonlyPanel .flaschen-table th:nth-child(1),
.mobile-app #flaschenReadonlyPanel .flaschen-table td:nth-child(1) { width: 20%; }
.mobile-app #flaschenReadonlyPanel .flaschen-table th:nth-child(2),
.mobile-app #flaschenReadonlyPanel .flaschen-table td:nth-child(2) { width: 50%; }
.mobile-app #flaschenReadonlyPanel .flaschen-table th:nth-child(3),
.mobile-app #flaschenReadonlyPanel .flaschen-table td:nth-child(3) { width: 15%; }

.mobile-app #ratingsReadonlyPanel .flaschen-table th:nth-child(1),
.mobile-app #ratingsReadonlyPanel .flaschen-table td:nth-child(1) { width: 16% !important; display: table-cell !important; }
.mobile-app #ratingsReadonlyPanel .flaschen-table th:nth-child(2),
.mobile-app #ratingsReadonlyPanel .flaschen-table td:nth-child(2) { width: 16% !important; display: table-cell !important; }
.mobile-app #ratingsReadonlyPanel .flaschen-table th:nth-child(3),
.mobile-app #ratingsReadonlyPanel .flaschen-table td:nth-child(3) { width: 43% !important; display: table-cell !important; }
.mobile-app #ratingsReadonlyPanel .flaschen-table th:nth-child(4),
.mobile-app #ratingsReadonlyPanel .flaschen-table td:nth-child(4) { width: 14% !important; display: table-cell !important; }
.mobile-app #ratingsReadonlyPanel .flaschen-table th:nth-child(5),
.mobile-app #ratingsReadonlyPanel .flaschen-table td:nth-child(5) { width: 11% !important; display: table-cell !important; }

.mobile-app #ratingsReadonlyPanel .flaschen-table tbody tr.own-rating td {
  color: var(--color-whisky);
}

.mobile-app #ratingsReadonlyPanel .flaschen-table tbody tr.foreign-rating td {
  color: var(--text-main);
}

.mobile-app #flaschenReadonlyPanel .flaschen-table tbody tr.own-bottle td {
  color: var(--color-whisky);
}

.bewerten-readonly-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: rgba(180, 179, 172, 0.18);
  color: var(--text-main);
  font-size: 14px;
}

.mobile-app #flaschenReadonlyPanel .flaschen-table th:nth-child(4), .mobile-app #flaschenReadonlyPanel .flaschen-table td:nth-child(4) { width: 15%; }

/* Journal table VIEW widths */
.journal-table.journal-table-view th:nth-child(1), .journal-table.journal-table-view td:nth-child(1) { width: 12%; }
.journal-table.journal-table-view th:nth-child(2), .journal-table.journal-table-view td:nth-child(2) { width: 8%; text-align: center;}
.journal-table.journal-table-view th:nth-child(3), .journal-table.journal-table-view td:nth-child(3) { width: 8%; }
.journal-table.journal-table-view th:nth-child(4), .journal-table.journal-table-view td:nth-child(4) { width: 6%; }
.journal-table.journal-table-view th:nth-child(5), .journal-table.journal-table-view td:nth-child(5) { width: 11%; }
 .journal-table.journal-table-view th:nth-child(6), .journal-table.journal-table-view td:nth-child(6) { width: 6%; }
 .journal-table.journal-table-view th:nth-child(7), .journal-table.journal-table-view td:nth-child(7) { width: 6%; }
 .journal-table.journal-table-view th:nth-child(8), .journal-table.journal-table-view td:nth-child(8) { width: 6%; }
 .journal-table.journal-table-view th:nth-child(9), .journal-table.journal-table-view td:nth-child(9) { width: 6%; }
 .journal-table.journal-table-view th:nth-child(10), .journal-table.journal-table-view td:nth-child(10) { width: 6%; }
.journal-table.journal-table-view th:nth-child(11), .journal-table.journal-table-view td:nth-child(11) { width: 7%; }
.journal-table.journal-table-view th:nth-child(12), .journal-table.journal-table-view td:nth-child(12) { width: 6%; }
.journal-table.journal-table-view th:nth-child(13), .journal-table.journal-table-view td:nth-child(13) { width: 6%; text-align: center; }

/* Journal table EDIT widths  */
.journal-table.journal-table-edit th:nth-child(1), .journal-table.journal-table-edit td:nth-child(1) { width: 13%; }
.journal-table.journal-table-edit th:nth-child(2), .journal-table.journal-table-edit td:nth-child(2) { width: 8%; text-align: center;}
.journal-table.journal-table-edit th:nth-child(3), .journal-table.journal-table-edit td:nth-child(3) { width: 8%; }
.journal-table.journal-table-edit th:nth-child(4), .journal-table.journal-table-edit td:nth-child(4) { width: 6%; }
.journal-table.journal-table-edit th:nth-child(5), .journal-table.journal-table-edit td:nth-child(5) { width: 10%; }
 .journal-table.journal-table-edit th:nth-child(6), .journal-table.journal-table-edit td:nth-child(6) { width: 6%; }
 .journal-table.journal-table-edit th:nth-child(7), .journal-table.journal-table-edit td:nth-child(7) { width: 6%; }
 .journal-table.journal-table-edit th:nth-child(8), .journal-table.journal-table-edit td:nth-child(8) { width: 6%; }
 .journal-table.journal-table-edit th:nth-child(9), .journal-table.journal-table-edit td:nth-child(9) { width: 6%; }
 .journal-table.journal-table-edit th:nth-child(10), .journal-table.journal-table-edit td:nth-child(10) { width: 6%; }
.journal-table.journal-table-edit th:nth-child(11), .journal-table.journal-table-edit td:nth-child(11) { width: 7%; }
.journal-table.journal-table-edit th:nth-child(12), .journal-table.journal-table-edit td:nth-child(12) { width: 6%; }
.journal-table.journal-table-edit th:nth-child(13), .journal-table.journal-table-edit td:nth-child(13) { width: 6%; text-align: center; }
.journal-table.journal-table-edit th:nth-child(14), .journal-table.journal-table-edit td:nth-child(14) { width: 8%; text-align: center; }
.journal-table td:nth-child(14) .actions {
  justify-content: center;
  margin: 0;
}

.ratings-table-wrap {
  overflow-x: auto;
}

.ratings-table {
  width: 100%;
  min-width: 0;
}

.ratings-table td {
  font-size: 13px;
  padding: 0 var(--ui-gap);
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
}

.ratings-table tbody tr:nth-child(even) td {
  background: var(--bg-main);
}

.ratings-table th,
.ratings-table td {
  white-space: nowrap;
}

.ratings-table col:nth-child(n+6):nth-child(-n+22),
.ratings-table th:nth-child(n+6):nth-child(-n+22),
.ratings-table td:nth-child(n+6):nth-child(-n+22) {
  width: 2.6%;
  min-width: 2.6%;
  max-width: 2.6%;
}

.ratings-table td:nth-child(n+5):nth-child(-n+22) {
  text-align: center;
}

.ratings-table th:nth-child(23),
.ratings-table th:nth-child(24),
.ratings-table td:nth-child(23),
.ratings-table td:nth-child(24) {
  white-space: normal;
  text-align: center;
  vertical-align: top;
  line-height: 1.35;
  padding-top: 6px;
  padding-bottom: 6px;
}

.ratings-table td:nth-child(25) {
  text-align: center;
}

.ratings-table.ratings-table-view-notes th:nth-child(5) {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: none;
  height: 28px;
  min-height: 28px;
  vertical-align: middle;
  text-align: left;
  padding: 0 var(--ui-gap);
}

.ratings-table.ratings-table-view-notes th:nth-child(23),
.ratings-table.ratings-table-view-notes th:nth-child(24) {
  height: 28px;
  min-height: 28px;
  vertical-align: middle;
  padding-top: 0;
  padding-bottom: 0;
}

.ratings-table.ratings-table-view-notes th:nth-child(23),
.ratings-table.ratings-table-view-notes th:nth-child(24),
.ratings-table.ratings-table-view-notes td:nth-child(23),
.ratings-table.ratings-table-view-notes td:nth-child(24) {
  text-align: center;
  vertical-align: top;
  line-height: 1.35;
  padding-top: 6px;
  padding-bottom: 6px;
}

.ratings-table th:nth-child(n+5):nth-child(-n+23) {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg) translateX(calc(50% - 6.5px));
  height: 210px;
  min-height: 210px;
  vertical-align: bottom;
  text-align: left;
  padding: 6px 2px;
}

.ratings-table.ratings-table-view th:nth-child(5),
.ratings-table.ratings-table-edit th:nth-child(5) {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg) translateX(calc(50% - 6.5px));
}

.ratings-table.ratings-table-view-notes th:nth-child(5) {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: none;
}

.ratings-table.ratings-table-view-notes th {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform: none !important;
  height: 28px !important;
  min-height: 28px !important;
  line-height: 28px !important;
  vertical-align: middle !important;
  text-align: left !important;
  padding: 0 var(--ui-gap) !important;
  white-space: nowrap !important;
}

.ratings-table.ratings-table-view-notes thead tr {
  height: 28px;
}

.ratings-table.ratings-table-edit th:nth-child(26) {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg) translateX(calc(50% - 6.5px));
  height: 210px;
  min-height: 210px;
  vertical-align: bottom;
  text-align: left;
  padding: 6px 2px;
}

/* Nebel Journal Modal: no rotated headers */
.ratings-table.ratings-table-nebel {
  table-layout: fixed;
  width: 100%;
}

.ratings-table.ratings-table-nebel th,
.ratings-table.ratings-table-nebel td {
  width: 16.666666%; /* 100% / 6 columns */
}

.ratings-table.ratings-table-nebel th {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform: none !important;
  height: auto !important;
  min-height: auto !important;
  line-height: auto !important;
  vertical-align: middle !important;
  text-align: left !important;
  padding: 0 var(--ui-gap) !important;
  white-space: nowrap !important;
}

.ratings-table td:nth-child(25) .actions {
  justify-content: center;
  margin: 0;
}

/* Ratings: keep first-column magnifier tooltip fully visible near left edge */
.ratings-table td:nth-child(1) .action-tooltip,
.ratings-table th:nth-child(1) .action-tooltip {
  left: 0;
  transform: none;
}

.flaschen-table td:nth-child(1) .action-tooltip,
.flaschen-table th:nth-child(1) .action-tooltip,
.people-table td:nth-child(1) .action-tooltip,
.people-table th:nth-child(1) .action-tooltip,
.journal-table td:nth-child(1) .action-tooltip,
.journal-table th:nth-child(1) .action-tooltip {
  left: 0;
  transform: none;
}

#ratingsModeSegment {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 280px;
}

#ratingsModeSegment .bottles-status-thumb {
  width: calc((100% - 4px) / 3);
}

#ratingsModeSegment[data-state="edit"] .bottles-status-thumb {
  transform: translateX(0%);
}

#ratingsModeSegment[data-state="view"] .bottles-status-thumb {
  transform: translateX(100%);
}

#ratingsModeSegment[data-state="view-notes"] .bottles-status-thumb {
  transform: translateX(200%);
}

#ratingsModeSegment .btn.small {
  white-space: nowrap;
  font-size: 13px;
}

#ratingsModeSegment #ratingsEditModeBtn:not(.active) {
  background: transparent;
  color: var(--text-main);
  font-weight: 500;
}

.ratings-action-cell .action-icon[data-action="delete-rating"] {
  color: #b00020;
}

.ratings-action-cell .action-icon[data-action="delete-rating"] span[aria-hidden] {
  font-size: 16px;
  font-weight: 700;
  transform: translateY(0);
}

.dashboard-login-table td:last-child .actions {
  justify-content: center;
  margin: 0;
}

.dashboard-event-table td:last-child .actions {
  justify-content: center;
  margin: 0;
}

.dashboard-login-table th:last-child,
.dashboard-login-table td:last-child,
.dashboard-event-table th:last-child,
.dashboard-event-table td:last-child {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
}

/* Dashboard log column plan (sum 100%): Datum/Zeit, Event, ID User, Login, User Agent, Action */
.dashboard-login-table th:nth-child(1),
.dashboard-login-table td:nth-child(1) { width: 11%; }

.dashboard-login-table th:nth-child(2),
.dashboard-login-table td:nth-child(2) { width: 8%; }

.dashboard-login-table th:nth-child(3),
.dashboard-login-table td:nth-child(3) { width: 8%; }

.dashboard-login-table th:nth-child(4),
.dashboard-login-table td:nth-child(4) { width: 8%; }

.dashboard-login-table th:nth-child(5),
.dashboard-login-table td:nth-child(5) { width: 57%; }

.dashboard-login-table th:nth-child(6),
.dashboard-login-table td:nth-child(6) { width: 5%; text-align: center; }

.dashboard-event-table th:nth-child(1),
.dashboard-event-table td:nth-child(1) { width: 11%; }

.dashboard-event-table th:nth-child(2),
.dashboard-event-table td:nth-child(2) { width: 7%; }

.dashboard-event-table th:nth-child(3),
.dashboard-event-table td:nth-child(3) { width: 7%; }

.dashboard-event-table th:nth-child(4),
.dashboard-event-table td:nth-child(4) { width: 7%; }

.dashboard-event-table th:nth-child(5),
.dashboard-event-table td:nth-child(5) { width: 7%; }

.dashboard-event-table th:nth-child(6),
.dashboard-event-table td:nth-child(6) { width: 10%; }

.dashboard-event-table th:nth-child(7),
.dashboard-event-table td:nth-child(7) { width: 43%; }

.dashboard-event-table th:nth-child(8),
.dashboard-event-table td:nth-child(8) { width: 5%; text-align: center; }

#dashboardEventLogTable th:nth-child(2),
#dashboardEventLogTable td:nth-child(2) { width: 18%; }

#dashboardEventLogTable th:nth-child(7),
#dashboardEventLogTable td:nth-child(7) { width: 32%; }

#dashboardMessagesTable th:nth-child(1),
#dashboardMessagesTable td:nth-child(1) { width: 15%; }

#dashboardMessagesTable th:nth-child(2),
#dashboardMessagesTable td:nth-child(2) { width: 10%; }

#dashboardMessagesTable th:nth-child(3),
#dashboardMessagesTable td:nth-child(3) { width: 10%; }

#dashboardMessagesTable th:nth-child(4),
#dashboardMessagesTable td:nth-child(4) { width: 65%; }

#dashboardMessagesTable.is-edit-mode th:nth-child(4),
#dashboardMessagesTable.is-edit-mode td:nth-child(4) { width: 59%; }

#dashboardMessagesTable.is-edit-mode th:last-child,
#dashboardMessagesTable.is-edit-mode td:last-child {
  width: 75px;
  min-width: 75px;
  max-width: 75px;
}

#dashboardEventLogTable th:nth-child(6),
#dashboardEventLogTable td:nth-child(6) {
  display: none;
}

.dashboard-message-row.is-clickable {
  cursor: pointer;
}

.dashboard-message-row.is-clickable:hover {
  background: rgba(255, 255, 255, 0.04);
}

th.sortable-col {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th.sortable-col:hover {
  color: var(--color-accent2);
}

th.sortable-col[data-sort-dir="asc"],
th.sortable-col[data-sort-dir="desc"] {
  color: var(--color-accent1);
}

.dashboard-delete-visible-btn {
  background: var(--color-toast-err);
  color: var(--color-error);
  border-color: var(--btn-border);
}

.dashboard-action-cell .action-icon[data-action^="delete-"] {
  color: #b00020;
}

.dashboard-action-cell .action-icon[data-action^="delete-"] span[aria-hidden] {
  font-size: 16px;
  font-weight: 700;
  transform: translateY(0);
}

/* double-width grid item */
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }

#createFlascheForm {
  grid-template-columns: 36% 6% 16% 10% auto;
  gap: 10px;
}

#createFlascheForm .inline-select-trigger {
  border-color: var(--text-main);
  min-height: 28px;
  height: 28px;
  padding: 0 var(--ui-gap);
  font-size: 13px;
  line-height: 1;
  border-radius: 6px;
}

#createFlascheForm > div:last-child {
  justify-self: end;
}

#completeFlascheForm {
  grid-template-columns: 17.5% 17% 6% 16% 10% auto;
  gap: 10px;
}

#completeFlascheForm .inline-select-trigger {
  border-color: var(--text-main);
  min-height: 28px;
  height: 28px;
  padding: 0 var(--ui-gap);
  font-size: 13px;
  line-height: 1;
  border-radius: 6px;
}

#completeFlascheForm > div:last-child {
  justify-self: end;
}

#completeFlascheForm .complete-form-actions {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#flaschenCompleteCard .card-head {
  align-items: center;
  margin-bottom: 2px;
}

#flaschenFilterCard .card-head {
  margin-bottom: 2px;
}

#flaschenCreateCard h2 {
  margin-bottom: 10px;
}

/* Toast popup for transient confirmations */
.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  z-index: 10000;
  pointer-events: none;
  max-height: calc(100vh - 32px);
  overflow-y: hidden;
}
.toast {
  background: rgba(0,0,0,0.85);
  color: var(--tt-text);
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 18px var(--tt-bg);
  font-size: 13px;
  opacity: 0.98;
  pointer-events: auto;
  max-width: min(420px, calc(100vw - 32px));
}
.toast-success {
  background: var(--color-toast-succ);
}
.toast-error {
  background: var(--color-toast-err);
}

/* close button inside toast */
.toast .toast-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.toast .toast-close:focus { outline: 2px solid var(--bg-medium); border-radius: 4px; }

/* make the first card's form inputs match filter-card appearance */
/* make form-grid-7 inputs match table-compact inputs (uniform size/spacing) */
.form-grid-7 input[type="text"],
.form-grid-7 input[type="email"],
.form-grid-7 input[type="number"],
.form-grid-7 .inline-input,
.form-grid-7 .inline-select {
  padding: 0 var(--ui-gap);
  font-size: 13px;
  line-height: 1;
  height: 28px;
  margin: 0;
  border-radius: 6px;
  color: var(--text-main);
  -webkit-text-fill-color: var(--text-main);
  caret-color: var(--text-main);
}
.form-grid-7 { gap: var(--ui-gap); }

#completeFlascheForm input[type="text"],
#completeFlascheForm input[type="number"] {
  padding: 0 var(--ui-gap);
  font-size: 13px;
  line-height: 1;
  height: 28px;
  margin: 0;
  border-radius: 6px;
  color: var(--text-main);
  -webkit-text-fill-color: var(--text-main);
  caret-color: var(--text-main);
}

#createUserForm input[type="text"],
#createUserForm input[type="email"],
#createUserForm input[type="number"],
#filterForm input[type="text"],
#filterForm input[type="email"],
#filterForm input[type="number"],
#filterForm select,
#filterForm textarea,
#ratingsFilterForm input[type="text"],
#ratingsFilterForm input[type="email"],
#ratingsFilterForm input[type="number"],
#ratingsFilterForm select,
#ratingsFilterForm textarea,
#buchenFlaschenFilterForm input[type="text"],
#buchenFlaschenFilterForm input[type="email"],
#buchenFlaschenFilterForm input[type="number"],
#buchenFlaschenFilterForm select,
#buchenFlaschenFilterForm textarea,
#journalFilterForm input[type="text"],
#journalFilterForm input[type="email"],
#journalFilterForm input[type="number"],
#journalFilterForm select,
#journalFilterForm textarea {
  color: var(--text-main);
  -webkit-text-fill-color: var(--text-main);
  caret-color: var(--text-main);
}

/* Placeholder color for 'Neuen Geniesser anlegen' form */
#createUserForm input::placeholder,
#createUserForm textarea::placeholder,
#createUserForm select::placeholder,
#createFlascheForm input::placeholder,
#createFlascheForm textarea::placeholder,
#createFlascheForm select::placeholder,
#filterForm input::placeholder,
#filterForm textarea::placeholder,
#filterForm select::placeholder,
#ratingsFilterForm input::placeholder,
#ratingsFilterForm textarea::placeholder,
#ratingsFilterForm select::placeholder,
#buchenFlaschenFilterForm input::placeholder,
#buchenFlaschenFilterForm textarea::placeholder,
#buchenFlaschenFilterForm select::placeholder,
#journalFilterForm input::placeholder,
#journalFilterForm textarea::placeholder,
#journalFilterForm select::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Vendor-prefixed placeholders for broader browser support */
#createUserForm input::-webkit-input-placeholder,
#createUserForm textarea::-webkit-input-placeholder,
#createFlascheForm input::-webkit-input-placeholder,
#createFlascheForm textarea::-webkit-input-placeholder,
#filterForm input::-webkit-input-placeholder,
#filterForm textarea::-webkit-input-placeholder,
#ratingsFilterForm input::-webkit-input-placeholder,
#ratingsFilterForm textarea::-webkit-input-placeholder,
#buchenFlaschenFilterForm input::-webkit-input-placeholder,
#buchenFlaschenFilterForm textarea::-webkit-input-placeholder,
#journalFilterForm input::-webkit-input-placeholder,
#journalFilterForm textarea::-webkit-input-placeholder { color: var(--text-muted); }
#createUserForm input::-moz-placeholder,
#createUserForm textarea::-moz-placeholder,
#createFlascheForm input::-moz-placeholder,
#createFlascheForm textarea::-moz-placeholder,
#filterForm input::-moz-placeholder,
#filterForm textarea::-moz-placeholder,
#ratingsFilterForm input::-moz-placeholder,
#ratingsFilterForm textarea::-moz-placeholder,
#buchenFlaschenFilterForm input::-moz-placeholder,
#buchenFlaschenFilterForm textarea::-moz-placeholder,
#journalFilterForm input::-moz-placeholder,
#journalFilterForm textarea::-moz-placeholder { color: var(--text-muted); }
#createUserForm input:-ms-input-placeholder,
#createUserForm textarea:-ms-input-placeholder,
#createFlascheForm input:-ms-input-placeholder,
#createFlascheForm textarea:-ms-input-placeholder,
#filterForm input:-ms-input-placeholder,
#filterForm textarea:-ms-input-placeholder,
#ratingsFilterForm input:-ms-input-placeholder,
#ratingsFilterForm textarea:-ms-input-placeholder,
#buchenFlaschenFilterForm input:-ms-input-placeholder,
#buchenFlaschenFilterForm textarea:-ms-input-placeholder,
#journalFilterForm input:-ms-input-placeholder,
#journalFilterForm textarea:-ms-input-placeholder { color: var(--text-muted); }
#createUserForm input::-ms-input-placeholder,
#createUserForm textarea::-ms-input-placeholder,
#createFlascheForm input::-ms-input-placeholder,
#createFlascheForm textarea::-ms-input-placeholder,
#filterForm input::-ms-input-placeholder,
#filterForm textarea::-ms-input-placeholder,
#ratingsFilterForm input::-ms-input-placeholder,
#ratingsFilterForm textarea::-ms-input-placeholder,
#buchenFlaschenFilterForm input::-ms-input-placeholder,
#buchenFlaschenFilterForm textarea::-ms-input-placeholder,
#journalFilterForm input::-ms-input-placeholder,
#journalFilterForm textarea::-ms-input-placeholder { color: var(--text-muted); }

/* Style submit button in form-grid-7  */
.form-grid-7 button[type="submit"] {
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--btn-border);
  background: var(--color-accent1); 
  font-weight: 400;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
}
#createUserForm button[type="submit"] {
  background: var(--color-accent1);
}
#createFlascheForm button[type="submit"] {
  background: var(--color-accent1);
}
#createUserForm {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr) auto;
  column-gap: 12px;
  row-gap: var(--ui-gap);
}
#createUserForm .btn-save-like {
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
}

#createUserForm .buddy-email.col-span-2 {
  grid-column: 3;
}

#createUserForm .buddy-role {
  grid-column: 4;
}

#createUserForm .buddy-role .inline-select-trigger {
  border-color: var(--text-main);
  min-height: 28px;
  padding: 0 var(--ui-gap);
  font-size: 13px;
  line-height: 1;
  border-radius: 6px;
}

#createUserForm .buddy-form-actions {
  grid-column: 5;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  justify-self: end;
}

.form-grid-7 button[type="submit"]:hover {
  background: var(--btn-hover);
}

/* remove number input spinners for cleaner table editing */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Editable data fields background for table and form inputs */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select,
.table-compact input,
.table-compact textarea,
.form-grid-7 input,
.form-grid-7 textarea {
  background: var(--bg-main);
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.bewerten-section-card {
  margin-top: 0;
}

.bewerten-locked-card.is-locked {
  opacity: 0.65;
}

.bewerten-card-lock-hint {
  font-size: 13px;
  color: var(--text-main);
  margin-bottom: 10px;
}

.bewerten-card-info-hint {
  margin-bottom: 18px;
}

.bewerten-card-activation-hint {
  margin-bottom: 18px;
}

.bewerten-sliders {
  display: grid;
  gap: 10px;
}

.bewerten-detail-line {
  font-size: 16px;
  line-height: 1.35;
  margin: 2px 0;
}

.bewerten-blind-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bewerten-blind-title {
  margin: 0;
  line-height: 1;
  color: var(--text-main);
}

.bewerten-slider-row {
  display: grid;
  gap: 6px;
}

.bewerten-slider-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.bewerten-slider-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
}

.bewerten-choice-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.bewerten-choice-buttons {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}

.bewerten-choice-buttons.is-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bewerten-choice-btn {
  height: 26px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: none;
}

.bewerten-choice-btn.is-active,
.bewerten-choice-btn:hover,
.bewerten-choice-btn:active,
.bewerten-choice-btn:focus,
.bewerten-choice-btn:focus-visible {
  background: var(--color-accent1);
  color: var(--text-main);
  outline: none;
}

.bewerten-slider {
  width: 100%;
  accent-color: var(--color-accent1);
}

.bewerten-slider::-moz-range-progress {
  background: var(--color-accent1);
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-controls .pill,
.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-controls .pill.pill-main,
.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-controls .pill.pill-err {
  background: var(--color-accent1);
  color: var(--text-main);
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .bewerten-choice-btn.is-active,
.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .bewerten-choice-btn:hover,
.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .bewerten-choice-btn:active,
.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .bewerten-choice-btn:focus,
.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .bewerten-choice-btn:focus-visible {
  background: var(--bg-medium);
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .bewerten-slider {
  accent-color: var(--bg-medium);
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .bewerten-slider::-moz-range-progress {
  background: var(--bg-medium);
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .bewerten-slider-controls .pill,
.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .bewerten-slider-controls .pill.pill-main,
.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .bewerten-slider-controls .pill.pill-err {
  background: var(--bg-medium);
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-controls .pill.bewerten-pill-null-main {
  background: var(--bg-main);
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-controls .pill.pill-muted,
.mobile-app.mobile-flasche-bewerten-page .bewerten-choice-buttons.is-readonly-field .bewerten-choice-btn.is-active {
  background: var(--bg-medium);
  color: var(--text-main);
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-slider-controls .pill.pill-muted,
.mobile-app.mobile-flasche-bewerten-page .bewerten-choice-buttons.is-readonly-field .bewerten-choice-btn.is-active {
  background: var(--bg-medium);
  color: var(--text-main);
}

.bewerten-slider.is-null {
  opacity: 0.55;
}

.bewerten-null-btn {
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--color-error);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.bewerten-null-btn:hover {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
}

.bewerten-save-card {
  margin-top: 12px;
}

.bewerten-save-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bewerten-notes-card {
  margin-top: 12px;
}

.bewerten-notes-grid {
  display: grid;
  gap: 10px;
}

.bewerten-notes-field {
  display: grid;
  gap: 6px;
}

.bewerten-notes-field > span {
  font-size: 13px;
  font-weight: 600;
}

.bewerten-notes-field textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border: 1px solid var(--btn-border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: var(--bg-main);
  color: var(--text-main);
}

.bewerten-view.is-readonly .bewerten-notes-field textarea[data-readonly-notes="1"] {
  overflow: hidden;
  resize: none;
}


/* =========================
 * Responsive
 * ========================= */

@media (max-width: 1100px) {
  .filters {
    grid-template-columns: 1fr;
  }

  .cards-2col {
    grid-template-columns: 1fr;
  }

  .cards-2col-half {
    grid-template-columns: 1fr;
  }

  .cards-2col-buchen {
    grid-template-columns: 1fr;
  }

  .buchen-form {
    grid-template-columns: 1fr;
  }

  .abrechnen-saldo-grid {
    grid-template-columns: 1fr;
  }

  .form-grid-7,
  .form-grid-6,
  .form-grid-4,
  .grid,
  .filters-journal {
    grid-template-columns: 1fr;
  }

  #createUserForm {
    grid-template-columns: 1fr;
  }

  #createUserForm .buddy-email.col-span-2,
  #createUserForm .buddy-role,
  #createUserForm .buddy-form-actions {
    grid-column: auto;
  }

  #createUserForm .buddy-form-actions {
    justify-content: flex-start;
    justify-self: start;
  }

  #createFlascheForm {
    grid-template-columns: 1fr;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 14px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 10px;
    background: var(--bg-white);
  }

  td {
    border: none;
    padding: 6px 0;
    text-align: left;
  }

  .num {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .menu {
    display: flex;
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
    gap: 8px;
  }

  .menu .btn {
    flex: 1 1 auto;
  }

}

@media (max-width: 700px) {
  .field .value {
    font-size: 17px;
  }
}

/* Phone-only compact mode for mobile_* pages */
@media (max-width: 720px) {
  .mobile-app .topbar {
    padding: 10px 12px;
    gap: 10px;
  }

  .mobile-app .brand {
    font-size: 16px;
  }

  .mobile-app .content {
    padding: 12px;
  }

  .mobile-app .wrap {
    padding: 0 10px 16px;
  }

  .mobile-app .card {
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
  }

  .mobile-app .scanner-foto-row {
    margin-bottom: 10px;
  }

  .mobile-app .scanner-foto-row > .card {
    margin-bottom: 0;
  }

  .mobile-app h1 {
    font-size: 20px;
  }

  .mobile-app h2 {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .mobile-app h3 {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .mobile-app .hint,
  .mobile-app .muted {
    font-size: 10px;
    margin-bottom: 8px;
  }

  .mobile-app button,
  .mobile-app .btn {
    font-size: 10px;
    padding: 7px 10px;
    border-radius: 7px;
    gap: 6px;
  }

  .mobile-app .log-toggle-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    font-size: 38px;
    line-height: 0.8;
    border-radius: 999px;
  }

  .mobile-app .btn.small {
    font-size: 9px;
    padding: 3px 7px;
    border-radius: 6px;
  }

  .mobile-app .mobile-ratings-scope-segment .btn.small,
  .mobile-app .mobile-ratings-filter-segment .btn.small {
    height: 12px !important;
    line-height: 12px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }

  .mobile-app .mobile-ratings-scope-segment,
  .mobile-app .mobile-ratings-filter-segment {
    padding: 1px;
  }

  .mobile-app .mobile-ratings-scope-segment .bottles-status-thumb {
    width: calc((100% - 2px) / 2);
  }

  .mobile-app .mobile-ratings-filter-segment .bottles-status-thumb {
    width: calc((100% - 2px) / 3);
  }

  .mobile-app input,
  .mobile-app select,
  .mobile-app textarea {
    padding: 7px;
    font-size: 11px;
    border-radius: 7px;
  }

  .mobile-app table,
  .mobile-app table th,
  .mobile-app table td,
  .mobile-app table input,
  .mobile-app table select {
    font-size: 11px;
  }

  .mobile-app th,
  .mobile-app td {
    padding: 6px;
  }

  .mobile-app .pill {
    font-size: 9px;
    padding: 3px 7px;
  }

  /* Keep mobile tables as real tables to fit more columns per row. */
  .mobile-app table {
    display: table;
    width: 100%;
  }

  .mobile-app thead {
    display: table-header-group;
  }

  .mobile-app tbody {
    display: table-row-group;
  }

  .mobile-app tr {
    display: table-row;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }

  .mobile-app th,
  .mobile-app td {
    display: table-cell;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    vertical-align: middle;
  }

  .mobile-app .num {
    text-align: right;
  }
}

/* =========================
 * Modal Styles
 * ========================= */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.modal-overlay-hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.modal-content {
  background-color: var(--bg-card);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 800px;
  width: 90%;
  max-height: 100vh;
  overflow-y: auto;
  padding: 0;
}

#ratingDetailModalOverlay .modal-content {
  max-width: 760px;
  width: 95%;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#nebelJournalModalOverlay .modal-content {
  max-width: 750px;
  width: 95%;
}

.modal-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-whisky);
  color: var(--color-white);
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-close {
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  margin-left: auto;
}

.btn-close:hover {
  opacity: 0.7;
}

.btn-close:active {
  opacity: 0.5;
}

.modal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.modal-actions .btn-save {
  background-color: var(--color-accent1);
  color: var(--bg-dark);
  padding: 6px 12px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.modal-actions .btn-save:hover {
  background-color: var(--color-accent2);
  transform: scale(1.02);
}

.modal-actions .btn-save:active {
  transform: scale(0.98);
}

.modal-actions .btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  background-color: var(--bg-main);
}

.modal-footer .btn-save {
  background-color: var(--color-accent1);
  color: var(--bg-dark);
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.modal-footer .btn-save:hover {
  background-color: var(--color-accent2);
  transform: scale(1.02);
}

.modal-footer .btn-save:active {
  transform: scale(0.98);
}

.modal-footer .btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.modal-body {
  margin: 14px 16px 0;
  padding: 14px;
  background: #fafafa;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
}

#ratingDetailModalOverlay .modal-body {
  background: var(--bg-main);
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 12px 16px 14px;
  overflow-y: auto;
  flex: 1 1 auto;
}

#ratingDetailModalOverlay .modal-footer {
  margin-top: 4px;
  background-color: var(--bg-card);
  border-top: none;
}

#ratingDetailContent .rating-detail-card,
#journalDetailContent .journal-detail-card,
#userDetailContent .user-detail-card,
#flascheDetailContent .flasche-detail-card {
  background: var(--bg-card);
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  padding: 12px;
}

#flascheDetailContent .field-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

#flascheDetailContent .field-row-pair .field {
  min-width: 0;
}

#flascheDetailContent .field-row-pair--sponsor {
  grid-template-columns: 1fr 1fr;
}

#flascheDetailContent .field-row-pair .modal-input,
#flascheDetailContent .field-row-pair .inline-select-trigger,
#flascheDetailContent .field-row-pair .sponsor-picker-field {
  width: 100%;
  box-sizing: border-box;
}

#flascheDetailContent .modal-inline-input-row--detail-id-wb {
  display: flex;
  align-items: center;
  gap: 4px;
}

#flascheDetailContent .modal-inline-input-row--detail-id-wb .modal-input {
  flex: 0 0 auto;
}

#flascheDetailContent .modal-link-btn--detail-id-wb {
  flex: 0 0 auto;
}

#flascheDetailContent #detail_vintage,
#flascheDetailContent #detail_bottled,
#detailContent #ownerVintage,
#detailContent #ownerBottled {
  width: 100%;
  box-sizing: border-box;
}

/* Rechte Felder in Paar-Zeilen wie Status-Select stylen */
#flascheDetailContent .field-row-pair > .field:last-child .modal-input {
  background: var(--bg-main);
}

#flascheDetailContent .flasche-detail-fotos-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flasche-foto-wrap {
  position: relative;
  display: inline-block;
}

.flasche-foto-del-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(200,0,0,0.85);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.flasche-foto-wrap:hover .flasche-foto-del-btn { opacity: 1; }

.flasche-detail-foto-img {
  max-width: 340px;
  max-height: 420px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: opacity 0.15s;
}

.flasche-detail-foto-img:hover { opacity: 0.85; }

/* Lightbox */
#fotoLightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

#fotoLightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

#journalDetailModalOverlay .modal-body,
#userDetailModalOverlay .modal-body,
#flascheDetailModalOverlay .modal-body {
  background: var(--bg-main);
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 12px 16px 14px;
}

#journalDetailModalOverlay .modal-footer,
#userDetailModalOverlay .modal-footer,
#flascheDetailModalOverlay .modal-footer {
  margin-top: 4px;
  background-color: var(--bg-card);
  border-top: none;
}

#flaschenSponsorPickerOverlay .modal-content {
  max-width: 520px;
  width: min(520px, 94vw);
}

#flaschenSponsorPickerOverlay .modal-body {
  background: var(--bg-main);
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 12px 16px 14px;
}

.flaschen-sponsor-picker-card {
  margin: 0;
}

.flaschen-sponsor-picker-card .card-head {
  align-items: center;
}

#flaschenSponsorPickerBody tr {
  cursor: pointer;
}

.sponsor-picker-field {
  position: relative;
}

.sponsor-picker-input {
  padding-left: 38px !important;
  padding-right: 8px !important;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.dram-picker-input {
  padding-left: 38px !important;
  padding-right: 8px !important;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.dram-picker-input:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

#completeFlascheForm #complete_id_sponsor {
  border-color: var(--text-main);
}

.sponsor-picker-input:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.sponsor-picker-badge {
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 6.25A1.75 1.75 0 0 1 4.25 4.5H7.2c.38 0 .73.18.95.49l.6.82c.22.3.57.49.95.49h6.05A1.75 1.75 0 0 1 17.5 8.05v6.2A1.75 1.75 0 0 1 15.75 16H4.25A1.75 1.75 0 0 1 2.5 14.25V6.25Z' fill='%232bb1c5'/%3E%3Cpath d='M2.85 8.2h14.3L15.9 14.9a1.2 1.2 0 0 1-1.18.97H5.28a1.2 1.2 0 0 1-1.18-.97L2.85 8.2Z' fill='%232bb1c5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  pointer-events: none;
}

.sponsor-picker-cell {
  min-width: 0;
}

.sponsor-picker-cell .sponsor-picker-badge {
  left: 6px;
}

#flascheDetailContent .sponsor-picker-badge--sponsor {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 6.25A1.75 1.75 0 0 1 4.25 4.5H7.2c.38 0 .73.18.95.49l.6.82c.22.3.57.49.95.49h6.05A1.75 1.75 0 0 1 17.5 8.05v6.2A1.75 1.75 0 0 1 15.75 16H4.25A1.75 1.75 0 0 1 2.5 14.25V6.25Z' fill='%2349ccde'/%3E%3Cpath d='M2.85 8.2h14.3L15.9 14.9a1.2 1.2 0 0 1-1.18.97H5.28a1.2 1.2 0 0 1-1.18-.97L2.85 8.2Z' fill='%2349ccde'/%3E%3C/svg%3E");
}

#flascheDetailContent .sponsor-picker-badge--dram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 6.25A1.75 1.75 0 0 1 4.25 4.5H7.2c.38 0 .73.18.95.49l.6.82c.22.3.57.49.95.49h6.05A1.75 1.75 0 0 1 17.5 8.05v6.2A1.75 1.75 0 0 1 15.75 16H4.25A1.75 1.75 0 0 1 2.5 14.25V6.25Z' fill='%2340adbe'/%3E%3Cpath d='M2.85 8.2h14.3L15.9 14.9a1.2 1.2 0 0 1-1.18.97H5.28a1.2 1.2 0 0 1-1.18-.97L2.85 8.2Z' fill='%2340adbe'/%3E%3C/svg%3E");
}

.modal-link-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
  padding: 2px 8px;
  min-height: 24px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

#flascheDetailContent .modal-link-btn--detail-value {
  width: 106px;
  justify-content: center;
  box-sizing: border-box;
}

#flascheDetailModalFooter {
  justify-content: space-between;
}

.modal-footer-left-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.fallback-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--text-secondary);
  font-size: 13px;
}

.fallback-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fallback-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #c9c9c9;
  border: 1px solid #b7b7b7;
  transition: all 0.2s ease;
}

.fallback-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.fallback-switch input:checked + .fallback-switch-track {
  background: var(--color-accent1);
  border-color: var(--color-accent2);
}

.mobile-app.mobile-flasche-bewerten-page .bewerten-view.is-readonly .fallback-switch input:checked + .fallback-switch-track {
  background: var(--bg-medium);
  border-color: var(--bg-medium);
}

.fallback-switch input:checked + .fallback-switch-track::after {
  transform: translateX(18px);
}

.fallback-switch-label {
  font-weight: 600;
}

.modal-body .field {
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.modal-body .field > .modal-input {
  flex: 1;
}

.modal-body .field.sponsor-picker-field {
  flex: 1;
}

.modal-body .field.sponsor-picker-field .modal-input {
  flex: 1;
  width: 100%;
}

.modal-body .field > .sponsor-picker-field {
  flex: 1;
}

.modal-body .field > .sponsor-picker-field .modal-input {
  width: 100%;
}



.modal-body .field:last-child {
  margin-bottom: 0;
}

.modal-body .label {
  font-weight: 600;
  color: var(--text-main);
  font-size: 14px;
  min-width: 115px;
  flex-shrink: 0;
  margin-bottom: 0;
  white-space: nowrap;
}

#journalDetailContent .label,
#journalDetailContent label {
  white-space: nowrap;
}

.modal-input {
  padding: 3px 6px;
  border: 1px solid var(--color-whisky);
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.25;
  min-height: 24px;
  font-family: inherit;
  background-color: var(--bg-card);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal-select {
  position: relative;
  flex: 1;
}

.modal-select-trigger {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--color-whisky);
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.25;
  min-height: 24px;
  font-family: inherit;
  background-color: var(--bg-main);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.modal-select-trigger:focus,
.modal-select.is-open .modal-select-trigger {
  outline: none;
  border-color: var(--color-whisky);
  color: var(--color-whisky);
  box-shadow: 0 0 0 3px rgba(139, 94, 4, 0.1);
}

.modal-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: none;
  z-index: 30;
  padding: 4px;
  border: 1px solid var(--color-whisky);
  border-radius: 6px;
  background-color: var(--bg-main);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.modal-select.is-open .modal-select-menu {
  display: block;
}

.modal-select-option {
  width: 100%;
  border: none;
  background: var(--bg-card);
  color: var(--text-main);
  text-align: left;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.25;
}

.modal-select-option:hover,
.modal-select-option:focus {
  outline: none;
  background-color: var(--color-whisky);
  color: var(--bg-card);
}

.modal-select-option.is-selected {
  background-color: var(--bg-main);
  color: var(--text-main);
}

.modal-select-option.is-selected:hover,
.modal-select-option.is-selected:focus {
  background-color: var(--color-whisky);
  color: var(--bg-card);
}

select.modal-input {
  appearance: none;
  cursor: pointer;
}

select.modal-input:focus {
  color: var(--color-whisky);
  -webkit-text-fill-color: var(--color-whisky);
}

select.modal-input option {
  background-color: var(--bg-main);
  color: var(--text-main);
}

select.modal-input option:checked {
  color: var(--color-whisky);
}

#flascheDetailContent #detail_status {
  border-color: var(--color-whisky);
  color: var(--text-main);
  background-color: var(--bg-main);
}

#flascheDetailContent #detail_status:focus {
  border-color: var(--color-whisky);
  color: var(--color-whisky);
  -webkit-text-fill-color: var(--color-whisky);
}

#flascheDetailContent #detail_status:active {
  color: var(--color-whisky);
  -webkit-text-fill-color: var(--color-whisky);
}

#userDetailContent #detail_role {
  border-color: var(--color-whisky);
  color: var(--text-main);
  background-color: var(--bg-main);
}

#userDetailContent #detail_role:focus {
  border-color: var(--color-whisky);
  color: var(--color-whisky);
  -webkit-text-fill-color: var(--color-whisky);
}

#userDetailContent #detail_role:active {
  color: var(--color-whisky);
  -webkit-text-fill-color: var(--color-whisky);
}

.modal-input:focus {
  outline: none;
  border-color: var(--color-whisky);
  box-shadow: 0 0 0 3px rgba(139, 94, 4, 0.1);
}

.modal-input:read-only {
  background-color: var(--bg-main);
  color: var(--text-muted);
  cursor: not-allowed;
  border-color: var(--bg-medium);
}

/* Rahmenfarbe nach Tabellenherkunft im Flasche-Detail-Modal */
#flascheDetailContent .modal-input--flaschen,
#flascheDetailContent .modal-select-trigger.modal-input--flaschen {
  border-color: var(--color-whisky);
}
#flascheDetailContent .modal-input--flaschen:focus,
#flascheDetailContent .modal-select-trigger.modal-input--flaschen:focus,
#flascheDetailContent .modal-select.is-open .modal-select-trigger.modal-input--flaschen {
  border-color: var(--color-whisky);
  box-shadow: 0 0 0 3px rgba(139, 94, 4, 0.15);
}
#flascheDetailContent .modal-input--drams,
#flascheDetailContent .modal-select-trigger.modal-input--drams {
  border-color: var(--color-accent4);
}

#flascheDetailContent #detail_alkoholgehalt,
#flascheDetailContent #detail_alter,
#flascheDetailContent #detail_anzahl_flaschen,
#flascheDetailContent #detail_fassnummer,
#flascheDetailContent #detail_preis,
#flascheDetailContent #detail_uvp,
#flascheDetailContent #detail_verkauft,
#flascheDetailContent #detail_vorverkauf {
  width: 15%;
  flex: 0 0 15%;
  max-width: 15%;
}

#flascheDetailContent #detail_vintage {
  width: 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

#flascheDetailContent #detail_id_wb {
  width: 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

#flascheDetailContent .field > .sponsor-picker-field {
  width: 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

#flascheDetailContent #detail_barcode {
  width: 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

#flascheDetailContent .modal-select[data-input-id="detail_status"] {
  width: 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

.modal-textarea {
  min-height: 60px;
  resize: vertical;
  background-color: var(--bg-main);
}

#ratingDetailContent .score-field .label {
  min-width: 35%;
  width: 35%;
}

#ratingDetailContent .score-field .modal-input {
  flex: 1;
}

#ratingDetailContent .score-field {
  align-items: flex-start;
}

#ratingDetailContent .score-field .rating-detail-choice-wrap {
  flex: 1;
  min-width: 0;
}

#ratingDetailContent .score-field .rating-detail-slider-wrap {
  flex: 1;
  min-width: 0;
}

#ratingDetailContent .score-field .rating-detail-nebel-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

#ratingDetailContent .score-field .rating-detail-nebel-wrap .modal-input {
  width: 4.6ch;
  min-width: 4.6ch;
  max-width: 4.6ch;
  height: 26px;
  min-height: 26px;
  line-height: 26px;
  padding: 0 4px;
  text-align: center;
}

#ratingDetailContent .score-field .bewerten-choice-controls {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 30px;
}

#ratingDetailContent .score-field .bewerten-slider-controls {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto 30px;
}

#ratingDetailContent [data-detail-slider-value="detail_overall_score"] {
  background: var(--color-accent1);
  color: var(--text-main);
}

#ratingDetailContent .score-field .bewerten-choice-buttons {
  width: 100%;
}

.modal-body .value {
  color: var(--text-main);
  word-break: break-word;
  flex: 1;
  text-align: right;
}

/* ---------- menu.html custom date picker ---------- */
.menu-date-picker-wrapper {
  position: relative;
  width: 100%;
}
.menu-date-input-row {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}
.menu-date-text-input {
  width: 96px;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 0.9rem;
  color: var(--text-main);
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
}
.menu-date-text-input:focus {
  border-color: var(--color-whisky);
}
.menu-cal-toggle-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0 6px;
  cursor: pointer;
  font-size: 1.9rem;
  line-height: 1;
  user-select: none;
}
.menu-cal-toggle-btn:hover,
.menu-cal-toggle-btn:focus {
  outline: none;
  opacity: 0.75;
}
.menu-calendar-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 300;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  min-width: 224px;
  box-sizing: border-box;
}
.menu-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.menu-cal-title {
  font-weight: 600;
  font-size: 0.9rem;
}
.menu-cal-nav {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-main);
  line-height: 1;
  padding: 0 6px;
}
.menu-cal-nav:hover {
  color: var(--color-whisky);
}
.menu-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.menu-cal-weekday {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 0 5px;
}
.menu-cal-day {
  text-align: center;
  padding: 5px 0;
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
  line-height: 1.4;
}
.menu-cal-day:hover {
  background: var(--bg-medium);
}
.menu-cal-has-entries {
  background: var(--color-whisky);
  color: #fff;
  font-weight: 700;
}
.menu-cal-has-entries:hover {
  background: var(--color-accent3);
  color: #fff;
}
.menu-cal-selected {
  outline: 2px solid var(--color-accent3);
  outline-offset: -2px;
  font-weight: 700;
}
.menu-cal-today:not(.menu-cal-has-entries):not(.menu-cal-selected) {
  background: var(--bg-medium);
}

/* ===== Admin Help Modal ===== */
#adminHelpOverlay .modal-body {
  background: var(--bg-main);
  border: none;
  border-radius: 0;
  margin: 0;
}
#adminHelpBody h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; border-bottom: 2px solid var(--color-whisky); padding-bottom: 6px; }
#adminHelpBody h2 { font-size: 1.25rem; font-weight: 600; margin: 28px 0 8px; color: var(--color-whisky); }
#adminHelpBody h3 { font-size: 1.05rem; font-weight: 600; margin: 20px 0 6px; }
#adminHelpBody p, #adminHelpBody li { line-height: 1.65; margin: 0 0 6px; }
#adminHelpBody ul, #adminHelpBody ol { padding-left: 20px; margin: 0 0 12px; }
#adminHelpBody hr { border: none; border-top: 1px solid var(--border-light); margin: 24px 0; }
#adminHelpBody code { background: var(--bg-medium); border-radius: 3px; padding: 1px 5px; font-size: .88em; }
#adminHelpBody pre { background: var(--bg-medium); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; }
#adminHelpBody pre code { background: none; padding: 0; }
#adminHelpBody blockquote { border-left: 3px solid var(--color-whisky); margin: 0 0 12px; padding: 6px 14px; background: var(--bg-card); border-radius: 0 4px 4px 0; }
#adminHelpBody table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: .93em; }
#adminHelpBody th { background: var(--bg-whisky); color: var(--color-white); padding: 7px 10px; text-align: left; }
#adminHelpBody td { padding: 6px 10px; border-bottom: 1px solid var(--border-light); }
#adminHelpBody tr:nth-child(even) td { background: var(--bg-medium); }
#adminHelpBody img { max-width: 100%; border-radius: 6px; border: 1px solid var(--border-light); margin: 8px 0 16px; display: block; }

/* ===== Mobile Help Modal ===== */
#mobileHelpOverlay .modal-body {
  background: var(--bg-main);
  border: none;
  border-radius: 0;
  margin: 0;
}
#mobileHelpBody h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; border-bottom: 2px solid var(--color-whisky); padding-bottom: 6px; }
#mobileHelpBody h2 { font-size: 1.25rem; font-weight: 600; margin: 28px 0 8px; color: var(--color-whisky); }
#mobileHelpBody h3 { font-size: 1.05rem; font-weight: 600; margin: 20px 0 6px; }
#mobileHelpBody p, #mobileHelpBody li { line-height: 1.65; margin: 0 0 6px; }
#mobileHelpBody ul, #mobileHelpBody ol { padding-left: 20px; margin: 0 0 12px; }
#mobileHelpBody hr { border: none; border-top: 1px solid var(--border-light); margin: 24px 0; }
#mobileHelpBody code { background: var(--bg-medium); border-radius: 3px; padding: 1px 5px; font-size: .88em; }
#mobileHelpBody pre { background: var(--bg-medium); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; }
#mobileHelpBody pre code { background: none; padding: 0; }
#mobileHelpBody blockquote { border-left: 3px solid var(--color-whisky); margin: 0 0 12px; padding: 6px 14px; background: var(--bg-card); border-radius: 0 4px 4px 0; }
#mobileHelpBody table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: .93em; }
#mobileHelpBody th { background: var(--bg-whisky); color: var(--color-white); padding: 7px 10px; text-align: left; }
#mobileHelpBody td { padding: 6px 10px; border-bottom: 1px solid var(--border-light); }
#mobileHelpBody tr:nth-child(even) td { background: var(--bg-medium); }
#mobileHelpBody img { max-width: 100%; width: 100%; border-radius: 6px; border: 1px solid var(--border-light); margin: 8px 0 16px; display: block; }
@media (max-width: 600px) {
  #mobileHelpOverlay .modal-content { padding: 0; }
  #mobileHelpBody { padding: 16px 14px !important; }
}

/* ── Tages-Statistik ─────────────────────────────────────────────────────── */
.mobile-stats-day-header {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-whisky);
  margin: 8px 0 10px;
}
.mobile-stats-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 10px;
}
.mobile-stats-label {
  font-size: .82rem;
  color: var(--color-text-muted, #888);
  white-space: nowrap;
}
.mobile-stats-users {
  font-size: .83rem;
  color: var(--color-text-muted, #888);
  margin-bottom: 10px;
  line-height: 1.5;
}
.mobile-stats-table {
  width: 100%;
  font-size: .88rem;
}
.mobile-stats-table th, .mobile-stats-table td {
  padding: 4px 6px;
}

/* ── Disziplin-Cards ─────────────────────────────────────────────────────── */
.stats-disc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .stats-disc-grid { grid-template-columns: 1fr; }
}
.stats-disc-card {
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 0;
}
.stats-disc-header {
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-whisky);
  margin-bottom: 8px;
  line-height: 1.3;
}
.stats-disc-card[data-old-title] {
  cursor: pointer;
}
.stats-disc-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stats-disc-header .stats-disc-toggle-btn {
  flex: 0 0 auto;
}
.stats-disc-header span {
  display: inline-block;
}
.stats-disc-tooltip {
  position: absolute;
  background: var(--color-accent4);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: .78rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 9999;
  white-space: nowrap;
}
.stats-disc-tooltip--visible {
  opacity: 1;
}
.stats-disc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: .84rem;
}
.stats-disc-row--clickable {
  cursor: pointer;
}
.stats-disc-card:not(.stats-disc-card--expanded) .stats-disc-row--extra {
  display: none;
}
.stats-disc-medal {
  flex: 0 0 22px;
  font-size: 1rem;
  line-height: 1;
}
.stats-disc-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-disc-value {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--color-whisky);
  white-space: nowrap;
}
.stats-disc-empty {
  font-size: .8rem;
  color: var(--color-text-muted, #888);
  padding: 4px 0;
}

/* Button Tooltips */
.btn-with-tooltip {
  position: relative;
}

.btn-with-tooltip:hover {
  z-index: 500;
}

.btn-with-tooltip::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tt-bg, #31312f);
  color: var(--tt-text, #f3f2f0);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: normal;
  width: 300px;
  text-align: left;
  z-index: 500;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  word-break: break-word;
}

/* Erstes Button in einer Grid-Zeile: Tooltip linksbündig, nicht abschneiden */
.buttons-grid .btn-with-tooltip:first-child::after {
  left: 0;
  transform: none;
}

.btn-with-tooltip:hover::after {
  display: block;
}