/* ── SX-ITSMP app.css v1.0.0 ─────────────────────────────────
   All colors reference CSS variables from Theme::css()
   Hardcoded values only for semantic states (red=error etc.)
──────────────────────────────────────────────────────────────*/

/* ── RESET ───────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-size, 14px); }
body {
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: var(--font-size, 14px);
  background: var(--gray-bg);
  color: var(--text);
  line-height: 1.5;
}

/* ── TOPBAR ──────────────────────────────────────────────────*/
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h, 52px); z-index: 1000;
  background: var(--topbar-bg, var(--white));
  border-bottom: 1px solid var(--gray-border);
  display: grid;
  grid-template-columns: var(--sidebar-w, 230px) 1fr auto;
  align-items: center;
  min-width: 0;
}
.topbar-left {
  display: flex; align-items: center;
  width: var(--sidebar-w, 230px); height: 100%;
  border-right: 1px solid var(--gray-border);
  padding: 0 14px; flex-shrink: 0; overflow: hidden;
}
.topbar-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; min-width: 0; }
.logo-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md, 8px);
  background: var(--logo-bg, var(--green));
  color: var(--logo-color, var(--white));
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg); font-weight: var(--font-bold); flex-shrink: 0;
}
.logo-name { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-sub  { font-size: var(--text-xs); color: var(--gray-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-center { display: flex; align-items: center; padding: 0 16px; min-width: 0; flex: 1; }
/* Topbar-Suche — siehe weiter unten (mit Live-Results-Dropdown) */
.topbar-right {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 0 8px; flex-shrink: 0;
}
.user-badge { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); color: var(--text-soft); min-width: 0; }
.user-badge-link { text-decoration: none; padding: 4px 8px; border-radius: var(--radius-md); transition: background .15s; }
.user-badge-link:hover { background: var(--gray-bg); color: var(--text); }
.user-badge-link:hover .user-avatar { background: var(--green); }
.user-name { font-weight: var(--font-semibold); font-size: var(--text-base); color: var(--text); white-space: nowrap; }
.user-role-badge {
  display: block; font-size: var(--text-2xs); color: var(--gray-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--green-light); border: 1.5px solid var(--green);
  color: var(--accent-text); font-size: var(--text-xs); font-weight: var(--font-semibold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.user-avatar-sm {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--green-light); color: var(--accent-text);
  font-size: var(--text-2xs); font-weight: var(--font-semibold);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.user-role-badge {
  font-size: var(--text-2xs); background: var(--green-light); color: var(--accent-text);
  padding: 2px 7px; border-radius: 10px; font-weight: var(--font-semibold);
}
.btn-logout {
  font-size: var(--text-sm); color: var(--text-soft);
  border: 1px solid var(--gray-border); background: var(--white);
  padding: 5px 12px; border-radius: var(--radius-sm, 6px);
  cursor: pointer; text-decoration: none; transition: background .12s;
}
.btn-logout:hover { background: var(--gray-bg); }

/* ── SIDEBAR ─────────────────────────────────────────────────*/
.sidebar {
  position: fixed; top: var(--topbar-h, 52px); left: 0; bottom: 0;
  width: var(--sidebar-w, 230px);
  background: var(--sidebar-bg, var(--white));
  border-right: 1px solid var(--gray-border);
  overflow-y: auto; z-index: 90; padding: 10px 0;
}
.sidebar-search {
  display: flex; align-items: center; gap: 6px;
  margin: 0 10px 12px; padding: 5px 10px;
  border: 1px solid var(--gray-border); border-radius: 7px;
  background: var(--gray-bg);
}
.sidebar-search input {
  border: none; background: transparent; font-size: var(--text-sm);
  color: var(--text); outline: none; width: 100%; font-family: inherit;
}
.nav-divider {
  height: 1px;
  background: var(--gray-border);
  margin: 6px 12px;
}
.nav-group-label {  font-size: var(--text-2xs); font-weight: var(--font-semibold); letter-spacing: .06em;
  color: var(--gray-text); padding: 10px 16px 3px; text-transform: uppercase;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; font-size: var(--text-base); color: var(--text-soft);
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s; position: relative;
  border-radius: 0;
}
.nav-item:hover {
  background: var(--green-light);
  color: var(--accent-light-text);
}
.nav-item:hover svg { opacity: 1; }
.nav-item.active {
  background: var(--green-light);
  color: var(--accent-light-text);
  font-weight: var(--font-semibold);
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--green); border-radius: 0 2px 2px 0;
}
.nav-item svg { opacity: .55; flex-shrink: 0; transition: opacity .15s; }
.nav-item.active svg { opacity: 1; }
.nav-badge {
  margin-left: auto; background: var(--hinweis-badge); color: var(--white);
  font-size: var(--text-2xs); font-weight: var(--font-bold); padding: 1px 7px;
  border-radius: 10px; min-width: 18px; text-align: center;
}

/* ── MAIN ────────────────────────────────────────────────────*/
.main-content {
  margin-left: var(--sidebar-w, 230px);
  margin-top: var(--topbar-h, 52px);
  padding: 24px;
  min-height: calc(100vh - var(--topbar-h, 52px) - 44px);
}
.main-footer {
  margin-left: var(--sidebar-w, 230px);
  padding: 12px 24px;
  border-top: 1px solid var(--gray-border);
  background: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-xs); color: var(--gray-text);
}
.footer-links a { color: var(--gray-text); text-decoration: none; margin-right: 14px; }
.footer-links a:hover { color: var(--green-text); }
.footer-version strong { color: var(--green-text); }

/* ── PAGE HEADER ─────────────────────────────────────────────*/
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; gap: 12px;
}
.page-title { font-size: var(--text-2xl); font-weight: var(--font-semibold); color: var(--text); }
.page-sub   { font-size: var(--text-sm); color: var(--gray-text); margin-top: 2px; }
.page-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.page-count {
  display: inline-block; font-size: var(--text-sm); font-weight: var(--font-medium);
  background: var(--gray-border); color: var(--text-soft);
  padding: 2px 8px; border-radius: 10px; margin-left: 8px;
}
.breadcrumb { font-size: var(--text-sm); color: var(--gray-text); margin-bottom: 4px; }
.breadcrumb a { color: var(--gray-text); text-decoration: none; }
.breadcrumb a:hover { color: var(--green-text); }

/* ── CARDS ───────────────────────────────────────────────────*/
.card {
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg, 10px); overflow: hidden;
}
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-border);
  font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
}
.card-body { padding: 16px; }
.card-body.p-0 { padding: 0; }
.card-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--gray-border);
  background: var(--gray-bg); font-size: var(--text-sm);
}
.mb-16 { margin-bottom: 16px; }

/* ── STAT ROW ────────────────────────────────────────────────*/
.stat-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-card {
  background: var(--white); border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg, 10px); padding: 14px 18px;
  flex: 1; min-width: 110px;
}
.stat-label {
  font-size: var(--text-2xs); font-weight: var(--font-semibold); letter-spacing: .06em;
  color: var(--gray-text); text-transform: uppercase; margin-bottom: 6px;
}
.stat-value { font-size: var(--text-5xl); font-weight: var(--font-bold); line-height: 1; }

/* ── FILTER BAR ──────────────────────────────────────────────*/
.filter-bar {
  background: var(--white); border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg, 10px); padding: 12px 16px; margin-bottom: 16px;
}
.filter-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-form > label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin: 0;
}
.filter-form > .btn,
.filter-form > button {
    flex-shrink: 0;
}

/* ── TABLE ───────────────────────────────────────────────────*/
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  font-size: var(--text-2xs); font-weight: var(--font-semibold); letter-spacing: .06em;
  color: var(--gray-text); text-transform: uppercase;
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--gray-border); white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid var(--gray-border); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr.table-row-link { cursor: pointer; transition: background .1s; }
.data-table tbody tr.table-row-link:hover { background: var(--green-light); }
.data-table tbody tr.row-business { background: var(--gray-100); }
.data-table tbody tr.row-business:hover { background: var(--green-light); }
.data-table tbody tr.row-business td:first-child { box-shadow: inset 3px 0 0 var(--green); }

/* Bearbeiten-Link in Listen — fester dunkler Wert, theme-unabhängig */
.data-table tbody .btn-link,
.data-table tbody a.btn-link {
  color: var(--text) !important;
  font-weight: var(--font-bold);
}
.data-table tbody .btn-link:hover,
.data-table tbody a.btn-link:hover {
  color: var(--text) !important;
  text-decoration: underline;
}
.data-table tbody td { padding: 10px 14px; font-size: var(--text-base); color: var(--text-soft); }
.table-empty { text-align: center; padding: 32px; color: var(--gray-text); }
td.bold { font-weight: var(--font-semibold); color: var(--text); }
td.mono { font-family:var(--font-mono); font-size: var(--text-sm); }

/* ── FORMS ───────────────────────────────────────────────────*/
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: var(--text-sm); font-weight: var(--font-semibold);
  margin-bottom: 5px; color: var(--text);
}
.form-label.required::after { content: ' *'; color: var(--color-error); }
.form-hint { font-size: var(--text-xs); color: var(--gray-text); margin-top: 4px; }
.form-input, .form-select, .form-textarea {
  width: 100%; border: 1px solid var(--gray-border);
  border-radius: var(--radius-md, 8px);
  padding: 7px 11px; font-size: var(--text-base); font-family: inherit;
  color: var(--text); background: var(--white); outline: none;
  transition: border-color .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--green-text);
}
.form-textarea { resize: vertical; min-height: 100px; }
.form-input-sm, .form-select-sm {
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-sm, 6px);
  padding: 5px 9px; font-size: var(--text-sm); font-family: inherit;
  color: var(--text); background: var(--white); outline: none;
  height: 32px; transition: border-color .15s;
}
.form-input-sm:focus, .form-select-sm:focus { border-color: var(--green-text); }
.form-select-sm { min-width: 120px; }

/* Catch-all: unklassifizierte Inputs/Selects/Textareas innerhalb einer .card
   bekommen automatisch den Standard-Stil — verhindert "nackte" Browser-Defaults
   in Quick-Add-Formularen, Filter-Bars usw. */
.card input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([class*="form-"]):not([class*="btn"]),
.card select:not([class*="form-"]):not([class*="btn"]),
.card textarea:not([class*="form-"]) {
  width: 100%;
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-md, 8px);
  padding: 7px 11px;
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.card input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([class*="form-"]):not([class*="btn"]):focus,
.card select:not([class*="form-"]):not([class*="btn"]):focus,
.card textarea:not([class*="form-"]):focus {
  border-color: var(--green-text);
}

/* ── BUTTONS ─────────────────────────────────────────────────*/
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-dark); color: var(--white);
  border: none; padding: 8px 18px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-base); font-weight: var(--font-semibold); cursor: pointer;
  font-family: inherit; text-decoration: none; transition: filter .15s;
}
.btn-primary:hover { filter: brightness(0.9); color: var(--white); }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--text-soft);
  border: 1px solid var(--gray-border);
  padding: 8px 14px; border-radius: var(--radius-sm, 6px);
  font-size: var(--text-base); cursor: pointer; font-family: inherit;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.btn-secondary:hover { background: var(--green-light); border-color: var(--green-dark); color: var(--accent-light-text); }
.btn-add {
  background: var(--green-dark); color: var(--white);
  border: none;
  padding: 6px 13px; border-radius: var(--radius-sm, 6px);
  font-size: var(--text-base); font-weight: var(--font-semibold); cursor: pointer; font-family: inherit;
  transition: filter .15s;
}
.btn-add:hover { filter: brightness(0.92); }
.btn-sm { padding: 5px 12px; font-size: var(--text-sm); height: 32px; }
.btn-block { display: flex; width: 100%; }
.btn-link {
  background: none; border: none; color: var(--green-text);
  font-size: var(--text-sm); cursor: pointer; text-decoration: none;
  padding: 0; font-family: inherit;
}
.btn-link:hover { text-decoration: underline; }
.btn-del { background: none; border: none; cursor: pointer; color: var(--color-error); font-size: var(--text-xl); padding: 2px 6px; border-radius: 4px; }
.btn-del:hover { background: var(--color-error-bg); }
.btn-del-sm { background: none; border: none; cursor: pointer; color: var(--gray-text); font-size: var(--text-md); padding: 0 4px; }
.btn-del-sm:hover { color: var(--color-error); }
.btn-danger { background: var(--color-error); color: var(--white); border: none; padding: 6px 14px; border-radius: var(--radius-sm,6px); font-size: var(--text-sm); cursor: pointer; font-family: inherit; }
.btn-danger:hover { background: var(--color-error-text); }

/* ── ROW-ACTIONS — kompakte Icon-Buttons für Tabellen-Zeilen ─── */
/* Vereinheitlichter Stil über alle Index/Show-Tabellen hinweg.   */
.row-action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  font-size: var(--text-xs); font-weight: var(--font-medium);
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  color: var(--gray-text);
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.row-action svg { flex-shrink: 0; }
.row-action:hover { background: var(--gray-bg); color: var(--text); }
.row-action-edit { border-color: var(--gray-border); }
.row-action-edit:hover { background: var(--gray-bg); color: var(--text); border-color: var(--gray-border); }
.row-action-danger { color: var(--gray-text); }
.row-action-danger:hover { color: var(--color-error-text); background: var(--color-error-bg); border-color: transparent; }
.row-action-warning { color: var(--color-warning-text); }
.row-action-warning:hover { background: var(--color-warning-bg); color: var(--color-warning-text); }
.row-action-success { color: #047857; }
.row-action-success:hover { background: #d1fae5; color: #065f46; }
/* Icon-only Variante: Label nur im title sichtbar, Text-Span optional */
.row-action-iconly { padding: 4px 6px; }
.row-action-iconly span { display: none; }

.mt-8 { margin-top: 8px; }

/* ── TICKET LAYOUT ───────────────────────────────────────────*/
.ticket-layout { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }
.meta-table { width: 100%; font-size: var(--text-sm); }
.meta-table td { padding: 5px 0; vertical-align: top; }
.meta-label { color: var(--gray-text); width: 90px; }
.time-total { font-size: var(--text-3xl); font-weight: var(--font-semibold); color: var(--text); }
.form-layout { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }

/* ── COMMENTS ────────────────────────────────────────────────*/
.comment-row { padding: 14px 16px; border-bottom: 1px solid var(--gray-border); }
.comment-row:last-child { border-bottom: none; }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.comment-author { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); }
.comment-meta { display: flex; align-items: center; gap: 8px; }
.comment-body { font-size: var(--text-base); color: var(--text); line-height: 1.6; }
.comment-form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 8px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-soft); cursor: pointer; }
.badge-internal { font-size: var(--text-2xs); background: var(--color-warning-bg); color: var(--color-warning-text); padding: 1px 6px; border-radius: 8px; font-weight: var(--font-semibold); }
.badge-source   { font-size: var(--text-2xs); background: var(--green-light); color: var(--accent-text); padding: 1px 6px; border-radius: 8px; }
.toggle-internal { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); font-weight: var(--font-normal); color: var(--text-soft); cursor: pointer; }

/* ── ATTACHMENTS ─────────────────────────────────────────────*/
.attachment-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--text-base); border-bottom: 1px solid var(--gray-border); }
.attachment-row:last-child { border-bottom: none; }

/* ── ALERTS ──────────────────────────────────────────────────*/
.alert {
  padding: 10px 14px; border-radius: var(--radius-md, 8px);
  margin-bottom: 16px; font-size: var(--text-base);
  display: flex; justify-content: space-between; align-items: center;
}
.alert-success { background: var(--green-light); color: var(--accent-text); border: 1px solid var(--green-mid); }
.alert-error   { background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.alert-close   { background: none; border: none; cursor: pointer; font-size: var(--text-xl); color: inherit; padding: 0 4px; }

/* ── AUTH ────────────────────────────────────────────────────*/
.auth-body {
  background: var(--gray-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 100vh;
}
.auth-wrap { width: 100%; max-width: 400px; padding: 24px; }
.auth-card {
  background: var(--white); border: 1px solid var(--gray-border);
  border-radius: var(--radius-xl, 12px); padding: 32px;
}
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.logo-icon-lg {
  width: 44px; height: 44px; border-radius: var(--radius-lg, 10px);
  background: var(--logo-bg, var(--green));
  color: var(--logo-color, var(--white));
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl); font-weight: var(--font-bold);
}
.auth-title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text); }
.auth-sub   { font-size: var(--text-sm); color: var(--gray-text); }
.auth-footer { text-align: center; font-size: var(--text-xs); color: var(--gray-text); margin-top: 16px; }

/* ── PAGINATION ──────────────────────────────────────────────*/
.pagination { display: flex; gap: 4px; align-items: center; padding: 10px 16px; }
.page-btn {
  min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-border); border-radius: var(--radius-sm, 6px);
  font-size: var(--text-sm); text-decoration: none; color: var(--text-soft);
  background: var(--white); transition: background .1s;
}
.page-btn:hover, .page-btn.active {
  background: var(--green-light); color: var(--accent-text);
  border-color: var(--green-text);
}
.page-dots { color: var(--gray-text); padding: 0 4px; }

/* ── MISC ────────────────────────────────────────────────────*/
.text-soft  { color: var(--text-soft); }
.text-muted { color: var(--gray-text); }
.bold { font-weight: var(--font-semibold); }
.mono { font-family:var(--font-mono); }
.prose { line-height: 1.7; font-size: var(--text-base); color: var(--text); }
.hidden { display: none !important; }
.p-16 { padding: 16px; }
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 6px;
  background: var(--gray-bg); border: 1px solid var(--gray-border);
  border-radius: 11px; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-soft);
}
.count-badge-orange { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.count-badge-green  { background: var(--green-light); border-color: var(--green-mid); color: var(--accent-light-text); }
.dot-active   { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }
.dot-inactive { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-border); }

/* ── TICKET TYPE ─────────────────────────────────────────────*/
.type-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:var(--text-xs); font-weight:var(--font-semibold); padding:2px 8px;
  border-radius:var(--radius-sm,6px); border:1px solid currentColor;
  white-space:nowrap;
}
.type-radio-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border:1px solid var(--gray-border);
  border-radius:var(--radius-sm,6px); cursor:pointer;
  font-size:var(--text-sm); font-weight:var(--font-medium); color:var(--text-soft);
  background:var(--white); transition:all .12s; user-select:none;
}
.type-radio-btn:has(input:checked) {
  background:var(--tb); color:var(--tc);
  border-color:var(--tc); font-weight:var(--font-semibold);
}
.type-radio-btn input { display:none; }
.type-radio-btn:hover { background:var(--gray-bg); }
/* ── RESPONSIVE / MOBILE ───────────────────────────────────────── */

/* Hamburger-Button — nur mobil sichtbar */
.mobile-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--white); color: var(--text);
  cursor: pointer; flex-shrink: 0;
}
.mobile-menu-btn svg { display: block; }

/* Overlay hinter der ausgeklappten Sidebar */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 89;
}

/* Tablet / kleine Laptops */
@media (max-width: 900px) {
  .ticket-layout, .form-layout { grid-template-columns: 1fr; }

  /* Sidebar wird zum ausklappbaren Panel */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 95;
    width: 250px;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-overlay { display: block; }

  .main-content { margin-left: 0; }
  .main-footer  { margin-left: 0; }

  /* Hamburger einblenden */
  .mobile-menu-btn { display: flex; }

  /* Topbar: starres 3-Spalten-Grid → flexibel */
  .topbar {
    grid-template-columns: auto 1fr auto;
  }
  .topbar-left {
    width: auto; border-right: none;
    padding: 0 10px;
  }
  .logo-name, .logo-sub { display: none; }   /* nur Icon behalten */

  /* Topbar-Suche schrumpfen, Scope-Buttons + Vollsuche ausblenden */
  .topbar-center { padding: 0 8px; }
  #ts-wrap { width: 100% !important; }
  #ts-wrap > form > div > div:not(.topbar-search) { display: none !important; }

  /* Dashboard- und Statistik-Grids: einspaltig */
  .dash-stats,
  .dash-grid-2, .dash-grid-3, .dash-grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Page-Header: Titel + Aktionen untereinander */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-header-actions { flex-wrap: wrap; }

  /* Filterleisten umbrechen lassen */
  .filter-form { flex-direction: column; align-items: stretch; }
  .filter-form > * { width: 100%; }

  /* Allgemeine zweispaltige Grids einspaltig */
  .form-grid-2, .settings-grid, .two-col {
    grid-template-columns: 1fr !important;
  }

  /* Reduziertes Padding für mehr Platz */
  .main-content { padding: 16px 12px; }
  .card-body { padding: 12px; }
}

/* Echte Smartphone-Breiten */
@media (max-width: 560px) {
  /* Topbar-Suche optional ganz ausblenden wenn zu eng */
  .topbar-center { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; }

  /* User-Badge: nur Avatar, Name/Rolle weg */
  .user-name, .user-role-badge { display: none; }
  .btn-logout { padding: 5px 8px; font-size: var(--text-sm); }
  #topbar-clock { display: none; }

  /* Tabellen horizontal scrollbar statt sprengen */
  .table-wrap, .data-table { display: block; overflow-x: auto; }
  .data-table { white-space: nowrap; }

  /* Karten + Header kompakter */
  .page-title { font-size: var(--text-2xl); }
  .card { border-radius: var(--radius-md, 8px); }
  .main-content { padding: 12px 8px; }

  /* Buttons in Aktionsleisten volle Breite */
  .page-header-actions .btn-primary,
  .page-header-actions .btn-secondary,
  .page-header-actions .btn-add { flex: 1; justify-content: center; }
}

/* ── WYSIWYG Editor ─────────────────────────────────────────────── */
.wysiwyg-wrap { border: 1px solid var(--gray-border); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.wysiwyg-hidden { display: none; }
.wysiwyg-toolbar { border-bottom: 1px solid var(--gray-border) !important; border-top: none !important; border-left: none !important; border-right: none !important; background: var(--gray-bg) !important; padding: 6px 8px !important; }
.wysiwyg-toolbar .ql-formats { margin-right: 10px !important; }
.wysiwyg-editor { border: none !important; font-family: inherit !important; font-size: var(--text-base) !important; }
.wysiwyg-editor .ql-editor { min-height: 100px; padding: 10px 14px; line-height: 1.7; }
.wysiwyg-editor .ql-editor.ql-blank::before { color: var(--gray-text); font-style: normal; }
.ql-toolbar.ql-snow { font-family: inherit; }
.ql-snow .ql-stroke { stroke: var(--text-soft); }
.ql-snow .ql-fill { fill: var(--text-soft); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--green); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--green); }
/* Rendered HTML inside editor and display areas */
.wysiwyg-content h2 { font-size: var(--text-xl); font-weight: var(--font-bold); margin: 12px 0 6px; }
.wysiwyg-content h3 { font-size: var(--text-md); font-weight: var(--font-bold); margin: 10px 0 4px; }
.wysiwyg-content ul, .wysiwyg-content ol { padding-left: 20px; margin: 6px 0; }
.wysiwyg-content li { margin: 2px 0; }
.wysiwyg-content blockquote { border-left: 3px solid var(--gray-border); padding-left: 12px; color: var(--gray-text); margin: 8px 0; }
.wysiwyg-content pre { background: var(--gray-bg); border-radius: 4px; padding: 8px 12px; font-size: var(--text-sm); overflow-x: auto; }
.wysiwyg-content code { background: var(--gray-bg); padding: 1px 5px; border-radius: 3px; font-size: var(--text-sm); }
.wysiwyg-content a { color: var(--green-text); }
.wysiwyg-content p { margin: 0 0 6px; }
.wysiwyg-content p:last-child { margin-bottom: 0; }

/* ── Mail-Body-Container für eingehende HTML-Mails ───────────────────
   Mail-HTML hat oft eigenes Styling (Tabellen-Layout, Inline-Styles).
   Container limitiert Bleeding ohne CSS Container Queries voll auszunutzen */
.mail-body {
  overflow-x: auto;          /* breite Tabellen: horizontal scrollen statt sprengen */
  max-width: 100%;
  /* basis-typografie */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.mail-body table { max-width: 100%; border-collapse: collapse; }
.mail-body table table { width: auto; }   /* nested tables: nicht erzwingen */
.mail-body td, .mail-body th { vertical-align: top; padding: 4px 8px; }
.mail-body img { max-width: 100%; height: auto; }
.mail-body a { color: var(--green-text); }
.mail-body p { margin: 0 0 6px; }
.mail-body p:last-child { margin-bottom: 0; }
.mail-body h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); margin: 16px 0 8px; }
.mail-body h2 { font-size: var(--text-2xl); font-weight: var(--font-bold); margin: 14px 0 7px; }
.mail-body h3 { font-size: var(--text-lg); font-weight: var(--font-bold); margin: 12px 0 6px; }
.mail-body h4 { font-size: var(--text-base); font-weight: var(--font-bold); margin: 10px 0 5px; }
.mail-body ul, .mail-body ol { padding-left: 22px; margin: 6px 0; }
.mail-body blockquote { border-left: 3px solid var(--gray-border); padding-left: 12px; color: var(--gray-text); margin: 8px 0; }
.mail-body pre { background: var(--gray-bg); border-radius: 4px; padding: 8px 12px; font-size: var(--text-sm); overflow-x: auto; white-space: pre-wrap; }
.mail-body code { background: var(--gray-bg); padding: 1px 5px; border-radius: 3px; font-size: var(--text-sm); }
.mail-body hr { border: none; border-top: 1px solid var(--gray-border); margin: 12px 0; }

/* ── Hinweis-Banner für blockierte externe Inhalte ─────────────── */
.ext-content-banner {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--color-warning-bg); border: 1px solid var(--color-warning);
  border-radius: 8px; padding: 10px 14px;
  font-size: var(--text-sm); color: var(--color-warning-text);
  margin: 0 0 14px; line-height: 1.45;
}
.ext-content-banner-icon { font-size: var(--text-2xl); flex: 0 0 auto; line-height: 1; padding-top: 2px; }
.ext-content-banner-text { flex: 1; }
.ext-content-banner-text strong { color: var(--color-warning-text); }
.ext-content-banner code {
  background: rgba(255,255,255,.6); padding: 1px 5px; border-radius: 3px;
  font-size: var(--text-xs); color: var(--color-warning-text);
}

/* Inline-Platzhalter [Extern] im Mail-Body */
.ext-placeholder {
  display: inline-block;
  background: var(--color-warning-bg); color: var(--color-warning-text);
  border: 1px solid var(--color-warning);
  font-size: var(--text-2xs); font-weight: var(--font-semibold);
  padding: 0 5px; border-radius: 3px;
  font-family:var(--font-mono);
  vertical-align: middle;
  cursor: help;
}

/* ── Drag & Drop Dropzone ───────────────────────────────────────── */
.dropzone-wrap { }
.dropzone-input { display:none; }
.dropzone-area {
  border: 2px dashed var(--gray-border); border-radius: var(--radius-md);
  padding: 24px 16px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--gray-bg);
}
.dropzone-area:hover, .dropzone-over {
  border-color: var(--green) !important;
  background: var(--green-light) !important;
}
.dropzone-icon { font-size: var(--text-4xl); margin-bottom: 6px; }
.dropzone-text { font-size: var(--text-base); color: var(--text); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.dropzone-main { font-weight: var(--font-semibold); }
.dropzone-sub  { color: var(--gray-text); }
.dropzone-browse { background: none; border: none; color: var(--green-text); cursor: pointer; font-size: var(--text-base); padding: 0; text-decoration: underline; }
.dropzone-hint { font-size: var(--text-xs); color: var(--gray-text); margin-top: 4px; }
.dropzone-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.dropzone-file {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--white); border: 1px solid var(--gray-border);
  border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.dz-file-icon { font-size: var(--text-xl); flex-shrink: 0; }
.dz-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.dz-file-size { color: var(--gray-text); flex-shrink: 0; font-size: var(--text-xs); }
.dz-file-remove {
  background: none; border: none; color: var(--gray-text); cursor: pointer;
  font-size: var(--text-xl); line-height: 1; padding: 0 2px; flex-shrink: 0;
  transition: color .1s;
}
.dz-file-remove:hover { color: var(--color-error); }

/* ── Comment Attachments ────────────────────────────────────────── */
.comment-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gray-border); }
.comment-attachment-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1px solid var(--gray-border);
  border-radius: 20px; font-size: var(--text-sm); text-decoration: none;
  color: var(--text); background: var(--gray-bg);
  transition: border-color .15s, background .15s;
  max-width: 240px;
}
.comment-attachment-link:hover { border-color: var(--green-text); background: var(--green-light); color: var(--accent-text); }
.att-icon { font-size: var(--text-base); flex-shrink: 0; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.att-size { color: var(--gray-text); font-size: var(--text-xs); flex-shrink: 0; white-space: nowrap; }
.dropzone-fallback { margin-top: 6px; }

/* ── Attachment item with delete button ─────────────────────────── */
.comment-attachment-item { display: inline-flex; align-items: center; gap: 0; }
.comment-attachment-item .comment-attachment-link { border-radius: 20px 0 0 20px; border-right: none; }
.comment-attachment-item .att-delete {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; padding: 4px 8px;
  background: var(--gray-bg); border: 1px solid var(--gray-border); border-left: none;
  border-radius: 0 20px 20px 0; cursor: pointer; color: var(--gray-text);
  font-size: var(--text-md); line-height: 1; transition: background .1s, color .1s;
}
.comment-attachment-item .att-delete:hover { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error-border); }

/* ── Ticket inline images ───────────────────────────────────────── */
.ticket-img-wrap { display:inline-block; margin:8px 0; max-width:100%; }
.ticket-img-wrap figcaption {
  font-size:var(--text-xs); color:var(--gray-text); margin-top:4px;
  display:flex; gap:8px;
}
.ticket-img-wrap figcaption a { color:var(--green-text); text-decoration:none; }
.ticket-img-wrap figcaption a:hover { text-decoration:underline; }
.ticket-img-wrap img { cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.1); }

/* ── Spin animation ──────────────────────────────────────────────── */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Tag Input ──────────────────────────────────────────────────── */
.tag-input-wrap { position: relative; }
.tag-input-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 3px 8px; border: 1px solid var(--gray-border);
  border-radius: var(--radius-md); background: var(--white); cursor: text;
  min-height: 30px; transition: border-color .15s;
}
.tag-input-box:focus-within { border-color: var(--green-text); }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag-pill {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--green-light); color: var(--accent-text);
  padding: 1px 7px; border-radius: 20px; font-size: var(--text-xs); font-weight: var(--font-medium);
}
.tag-remove {
  background: none; border: none; cursor: pointer; color: var(--accent-light-text);
  font-size: var(--text-sm); line-height: 1; padding: 0; opacity: .6;
}
.tag-remove:hover { opacity: 1; }
.tag-text-input {
  border: none; outline: none; background: transparent;
  font-size: var(--text-sm); min-width: 80px; flex: 1; padding: 1px 0;
}

/* Comment body larger text */
.comment-body.wysiwyg-content { font-size: var(--text-md); line-height: 1.7; }
.tag-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white); border: 1px solid var(--gray-border);
  border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0,0,0,.08);
  z-index: 999; max-height: 200px; overflow-y: auto;
}
.tag-sugg-item {
  padding: 8px 12px; font-size: var(--text-base); cursor: pointer; color: var(--text);
}
.tag-sugg-item:hover, .tag-sugg-item.active { background: var(--green-light); color: var(--accent-text); }

/* ── Badge Picker Buttons ───────────────────────────────────────── */
.badge-picker-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border: 1.5px solid var(--gray-border);
  border-radius: 20px; background: var(--white); cursor: pointer; font-size: var(--text-sm);
  transition: border-color .15s, background .15s;
}
.badge-picker-btn:hover { border-color: var(--green-text); background: var(--green-light); color: var(--accent-light-text); }
.badge-picker-active { font-weight: var(--font-semibold); }

/* ── BULK ACTIONS ────────────────────────────────────────────*/
.bulk-bar {
  display:none;position:sticky;bottom:0;left:0;right:0;z-index:200;
  background:var(--white);border-top:2px solid var(--green);
  padding:10px 20px;box-shadow:0 -4px 16px rgba(0,0,0,.08);
  align-items:center;gap:12px;flex-wrap:wrap;
}
.bulk-bar.active { display:flex; }
.bulk-count { font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text);flex:1 }
.cb-row { width:16px;height:16px;cursor:pointer;accent-color:var(--green) }
.cb-all { width:16px;height:16px;cursor:pointer;accent-color:var(--green) }

/* ── sxMeals-spezifische Erweiterungen ────────────────────────*/

/* ── Form-Felder (einheitlich für .field und .form-group) ──── */

.field, .form-group {
    margin-bottom: 16px;
}
.field > label, .form-group > .form-label, .form-group > label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: 5px;
    color: var(--text);
}
.form-label.required::after { content: ' *'; color: var(--color-error); }

/* Universelle Selektoren: ALLE inputs (außer checkbox/radio/file/button), selects, textareas in einer .field oder .form-group */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]):not([type=submit]),
.field select,
.field textarea,
.form-group input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]):not([type=submit]),
.form-group select,
.form-group textarea,
.form-input, .form-select, .form-textarea {
    width: 100%;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-md);
    padding: 7px 11px;
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--text);
    background: var(--white);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    line-height: 1.5;
    box-sizing: border-box;
}

.field input:focus, .field select:focus, .field textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--green-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent);
}

.field input:disabled, .field select:disabled, .field textarea:disabled,
.form-group input:disabled, .form-group select:disabled, .form-group textarea:disabled {
    background: var(--gray-bg);
    color: var(--gray-text);
    cursor: not-allowed;
}

.field textarea, .form-group textarea, .form-textarea {
    min-height: 80px;
    resize: vertical;
}

.field input[type=checkbox], .field input[type=radio],
.form-group input[type=checkbox], .form-group input[type=radio] {
    width: auto;
    margin-right: 6px;
    transform: translateY(1px);
}

/* Checkbox-Labels nicht block-weite */
.field label > input[type=checkbox],
.field label > input[type=radio] {
    margin-right: 6px;
}
.field > label:has(> input[type=checkbox]),
.field > label:has(> input[type=radio]) {
    font-weight: var(--font-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* Hint-Text unter Feld */
.field small, .field .form-hint, .form-group .form-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--gray-text);
    margin-top: 4px;
}
.field small.muted { font-size: var(--text-xs); }
.field small code, .form-hint code {
    background: var(--gray-bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: var(--text-xs);
}

/* Stand-alone Inputs (außerhalb .field) — wie Filter-Inputs */
input.form-input, select.form-select, textarea.form-textarea,
.filter-form input[type=text],
.filter-form input[type=search],
.filter-form input[type=date],
.filter-form input[type=number],
.filter-form select {
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-md);
    padding: 7px 11px;
    font-size: var(--text-base);
    font-family: inherit;
    color: var(--text);
    background: var(--white);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.filter-form input:focus, .filter-form select:focus {
    border-color: var(--green-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent);
}


/* Grid-Layout für Formulare */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 16px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

/* Generic muted text */
.muted {
    color: var(--gray-text);
    font-size: var(--text-sm);
}

/* Alerts (kompatibel zu altem alert/alert-error/alert-info) */
.alert {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    margin-bottom: 12px;
}
.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}
.alert-info {
    background: var(--hinweis-bg);
    color: var(--hinweis-text);
    border: 1px solid var(--hinweis-border);
}
.alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

/* Eine Karte, die selbst alert ist */
.card.alert { padding: 16px; }
.card.alert h2, .card.alert h3 { margin-top: 0; }

/* Section card mit allergen-spezifischem Inhalt */
section.card,
section.card-section {
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}
section.card h2,
section.card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--text);
}
section.card h2 { font-size: var(--text-xl); font-weight: var(--font-semibold); }
section.card h3 { font-size: var(--text-md); font-weight: var(--font-semibold); }

/* Allergen-Grid */
.allergen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.allergen-item, .allergen-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-md);
    background: var(--white);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.allergen-item:hover, .allergen-choice:hover {
    background: var(--green-light);
    border-color: var(--green-mid);
}
.allergen-name { font-weight: var(--font-medium); }

/* Default-Tabellen-Padding (für data-table, falls in section.card) */
section.card .data-table {
    margin: 0 -16px;
    width: calc(100% + 32px);
}
section.card .data-table thead th,
section.card .data-table tbody td {
    padding-left: 16px;
    padding-right: 16px;
}

/* Headings in Card-Section */
section.card > h2:first-child,
section.card > h3:first-child {
    border-bottom: 1px solid var(--gray-border);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

/* Button-Group im Karten-Footer */
.card-footer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-border);
    background: var(--gray-bg);
}

/* Spacing helpers */
.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

/* Inline-Form-Aktionen unten in Forms */
.form-actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-border);
    margin-top: 16px;
}

/* ── Auto-Polish für ältere Detail-/Form-Views ───────────────*/

/* Alter "← Zurück"-Link mit class="muted" */
section.card > a.muted:first-child {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--gray-text);
    font-size: var(--text-sm);
    text-decoration: none;
}
section.card > a.muted:first-child:hover {
    color: var(--green-text);
    text-decoration: underline;
}

/* H2 mit margin:.5rem 0 0 sieht oft nach Titel aus, ihm Page-Header-Look geben */
section.card > h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin-top: 0;
    margin-bottom: 16px;
}

/* Cards die mehrere Buttons im Header-Bereich haben (display:flex inline) */
section.card[style*="display:flex"] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}
section.card[style*="display:flex"] h2 {
    margin-bottom: 4px;
}

/* Submit-Buttons unten bei Forms */
.field + .field { margin-top: 0; }
.card form > .field:last-of-type { margin-bottom: 16px; }

/* Buttons innerhalb von Card-Forms unten */
.card form > button[type="submit"],
.card form > .btn-primary[type="submit"] {
    margin-top: 8px;
}

/* small.muted für Hints unter Inputs */
.field small.muted {
    display: block;
    font-size: var(--text-xs);
    color: var(--gray-text);
    margin-top: 4px;
}
.field small.muted code {
    background: var(--gray-bg);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Checkbox-Label mit Inline-Checkbox */
.field label[style*="display:flex"],
label[style*="align-items:center"] {
    cursor: pointer;
}

/* Card mit alert-Klasse (alter Stil) sieht wie reguläre Alert aus */
.card.alert-info,
.card.alert-error {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}
.card.alert-info {
    background: var(--hinweis-bg);
    color: var(--hinweis-text);
    border: 1px solid var(--hinweis-border);
}
.card.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}

/* Stat-Grid (alte Klasse, jetzt wie stat-row) */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.stat-grid > div {
    background: var(--gray-bg);
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}
.stat-grid > div > span.muted {
    display: block;
    font-size: var(--text-2xs);
    font-weight: var(--font-semibold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gray-text);
    margin-bottom: 4px;
}
.stat-grid > div > b {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text);
}

/* h4 in section.card */
section.card h4 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text);
    margin: 0 0 8px;
}

/* Buttons direkt nebeneinander in einer Reihe */
.card div[style*="display:flex"][style*="gap"] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Button-Größen ───────────────────────────────────────────*/
.btn-xs {
    font-size: var(--text-xs) !important;
    padding: 3px 8px !important;
}
.btn-sm {
    font-size: var(--text-sm) !important;
    padding: 5px 10px !important;
}
.btn-danger {
    background: var(--color-error) !important;
    color: var(--white) !important;
    border-color: var(--color-error) !important;
}
.btn-danger:hover {
    background: var(--color-error-text) !important;
}

/* ── Topbar-Suche ────────────────────────────────────────────*/
.topbar-search {
    position: relative;
    width: 100%;
    max-width: 460px;
}
.topbar-search input[type=search] {
    width: 100%;
    padding: 7px 11px 7px 32px;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: inherit;
    background: var(--gray-bg);
    color: var(--text);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.topbar-search input[type=search]:focus {
    border-color: var(--green-text);
    background: var(--white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent);
}
.search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    max-height: 420px;
    overflow-y: auto;
    z-index: 1000;
}
.search-dropdown .sd-group-label {
    padding: 8px 12px 4px;
    font-size: var(--text-xs);
    text-transform: uppercase;
    font-weight: var(--font-bold);
    color: var(--gray-text);
    letter-spacing: .04em;
    background: var(--gray-bg);
    border-bottom: 1px solid var(--gray-border);
}
.search-dropdown a.sd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--gray-border);
}
.search-dropdown a.sd-item:last-child { border-bottom: 0; }
.search-dropdown a.sd-item:hover { background: var(--green-light); }
.search-dropdown a.sd-item .sd-icon { font-size: var(--text-2xl); width: 22px; text-align: center; }
.search-dropdown a.sd-item .sd-title { font-size: var(--text-base); font-weight: var(--font-semibold); line-height: 1.3; }
.search-dropdown a.sd-item .sd-sub { font-size: var(--text-xs); color: var(--gray-text); line-height: 1.2 }
.search-dropdown .sd-empty {
    padding: 16px;
    text-align: center;
    color: var(--gray-text);
    font-size: var(--text-base);
}

/* ── Bell ────────────────────────────────────────────────────*/
.bell-btn {
    position: relative;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 7px;
    border-radius: 6px;
    color: var(--text);
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bell-btn:hover { background: var(--gray-bg); }
.bell-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-error);
    color: var(--white);
    border-radius: 8px;
    font-size: var(--text-2xs);
    font-weight: var(--font-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bell-dropdown {
    position: absolute;
    top: calc(var(--topbar-h) + 4px);
    right: 12px;
    width: 360px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    z-index: 1000;
}
.bell-dropdown .bd-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-border);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    background: var(--gray-bg);
}
.bell-dropdown .bd-item {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--gray-border);
    border-left: 3px solid transparent;
}
.bell-dropdown .bd-item:last-child { border-bottom: 0; }
.bell-dropdown .bd-item:hover { background: var(--gray-bg); }
.bell-dropdown .bd-item.bd-warn { border-left-color: var(--color-warning); }
.bell-dropdown .bd-item.bd-err  { border-left-color: var(--color-error); }
.bell-dropdown .bd-title { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.bell-dropdown .bd-title.bd-warn { color: var(--color-warning); }
.bell-dropdown .bd-title.bd-err  { color: var(--color-error); }
.bell-dropdown .bd-text {
    font-size: var(--text-sm);
    color: var(--text-soft);
    margin-top: 2px;
    word-break: break-word;
}
.bell-dropdown .bd-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--gray-text);
    font-size: var(--text-base);
}

/* mt-16 + mt-8 Utility */
.mt-16 { margin-top: 16px; }
.mt-8  { margin-top: 8px; }

/* ── Tabs ────────────────────────────────────────────────────*/
.tab-nav {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--gray-border);
    margin-bottom: 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.tab-nav button {
    background: transparent;
    border: 0;
    padding: 10px 18px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--gray-text);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    font-family: inherit;
}
.tab-nav button:hover { color: var(--text); }
.tab-nav button.active {
    color: var(--green-text);
    border-bottom-color: var(--green-text);
}
.tab-nav button .tab-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--gray-bg);
    color: var(--gray-text);
    border-radius: 8px;
    font-size: var(--text-2xs);
    font-weight: var(--font-bold);
}
.tab-nav button.active .tab-badge {
    background: var(--green);
    color: var(--accent-text);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ════════════════════════════════════════════════════════════════
 * PRINT-OPTIMIERUNG
 * Wird sowohl beim direkten Browser-Print verwendet (Cmd+P) als auch
 * beim Aufruf der Print-Variante /print/... Routes (?print=1).
 * ════════════════════════════════════════════════════════════════ */
@media print {
  /* UI-Chrome komplett ausblenden */
  .betrieb-sidebar, .mandant-sidebar, aside.sidebar,
  .betrieb-topbar, .mandant-topbar, .topbar,
  .shell-footer, .main-footer, .portal-footer,
  .betrieb-nav-backdrop,
  .nav-toggle,
  .no-print,
  button:not(.print-keep),
  .btn:not(.print-keep),
  form,
  .alert,
  .page-header-actions {
    display: none !important;
  }

  /* Layout neutralisieren: Inhalt nimmt volle Breite */
  .betrieb-shell, .mandant-shell,
  .admin-shell {
    display: block !important;
    grid-template-columns: none !important;
  }
  .betrieb-main, .mandant-main, .admin-main { display: block !important; }
  .betrieb-content, .mandant-content, .admin-content, main {
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
  }

  /* Seite: helles Papier */
  body, html {
    background: white !important;
    color: black !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
  }
  body * { color: black !important; box-shadow: none !important; }

  /* Cards entzaubern */
  .card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    background: white !important;
    page-break-inside: avoid;
    margin-bottom: 12pt !important;
  }
  .card-header {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #ccc !important;
    font-weight: bold !important;
  }

  /* Tabellen: durchgehende Linien — nutzt aber `:not(.sp-print-tbl)` um spezifische Print-Views nicht zu stören */
  table { border-collapse: collapse; width: 100%; }
  table:not(.no-print-borders) th,
  table:not(.no-print-borders) td {
    border: 0.5pt solid #999;
    padding: 4pt 6pt;
  }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }

  /* Links nicht unterstreichen, URL nicht zeigen */
  a, a:visited { color: black !important; text-decoration: none !important; }
  a[href]::after { content: ""; }

  /* Seitenränder */
  @page {
    size: A4;
    margin: 1.5cm 1.5cm 2cm 1.5cm;
  }

  /* Page-Header in Druckansicht: Titel groß, Untertitel kursiv */
  .page-title { font-size: 18pt !important; font-weight: bold !important; margin: 0 0 4pt !important; }
  .page-sub   { font-size: 10pt !important; font-style: italic; margin: 0 0 12pt !important; }

  /* Speziell für Speiseplan-Wochenansicht: in Druck immer Wochenansicht (nicht Tagesansicht) */
  .week-view, body.force-week-view .week-view { display: block !important; }
  .day-view,  body.force-day-view .day-view   { display: none !important; }
  .view-toggle, .sp-toolbar { display: none !important; }
  .speiseplan-table { font-size: 9pt !important; }
  .speiseplan-table .mahlzeit-cell {
    background: #f5f5f5 !important;
    position: static !important;
  }
  .speiseplan-table thead th.tag-head.tag-heute,
  .speiseplan-table td.slot.tag-heute {
    background: #fff8e0 !important;
  }
  .slot-add-btn { display: none !important; }
  .slot-eintrag .del, .slot-eintrag button { display: none !important; }
  .slot-eintrag {
    box-shadow: none !important;
    border-left-width: 2pt !important;
    page-break-inside: avoid;
  }
}

/* ── Print-Bar (am oberen Rand des Ausdrucks, Buttons) ─────────────*/
.print-bar {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 16px;
}
.print-bar .btn-print {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.print-bar .btn-print:hover {
  background: var(--green-light);
  border-color: var(--green);
  color: var(--accent-light-text);
}
.print-bar .btn-print svg { width: 16px; height: 16px; }

@media print {
  .print-bar { display: none !important; }
}