:root {
  --bg: #f7f7fb;
  --panel: #ffffff;
  --border: #e4e4eb;
  --text: #1f1f26;
  --muted: #6c6c7a;
  --primary: #2563eb;
  --primary-bg: #e1e8ff;
  --seller: #0b8a00;
  --buyer: #1d4ed8;
  --system: #6b7280;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; }
.app { display: grid; grid-template-columns: 320px 1fr 350px; height: 100vh; min-height: 0; }
.sidebar { border-right: 1px solid var(--border); background: var(--panel); overflow-y: auto; min-height: 0; }
.right-panel { border-left: 1px solid var(--border); background: var(--panel); overflow-y: auto; padding: 12px 8px; min-height: 0; }
.header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; }
.ticket-list { list-style: none; }
.ticket-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.ticket-item:hover { background: #f0f4ff; }
.ticket-item.active { background: var(--primary-bg); border-left: 4px solid var(--primary); }
.ticket-id { font-weight: 700; }
.ticket-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.group-title { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted); background: #f0f2f7; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.group-title.attention { color: #b91c1c; background: #fef2f2; }
.ticket-empty { padding: 12px 16px; font-size: 13px; color: var(--muted); }
.main { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.main-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--panel); }
#ticketTitle .copyable-value { font-weight: 600; color: var(--text); }
.right-panel-header { font-weight: 700; font-size: 14px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.info-panel { font-size: 13px; color: var(--text); }
.info-section { margin-bottom: 20px; }
.order-notice { font-size: 13px; line-height: 1.4; padding: 10px 12px; border-radius: 6px; overflow-wrap: anywhere; }
.order-notice.muted { color: var(--muted); background: #f9fafb; border: 1px solid var(--border); }
.order-notice.error { color: #b42318; background: #fef3f2; border: 1px solid #fda29b; font-weight: 700; }
.order-notice.warn { color: #93370d; background: #fffaeb; border: 1px solid #fec84b; font-weight: 600; margin-top: 8px; }
.order-match-note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.order-select { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; background: #fff; color: var(--text); }
.order-refresh-btn { margin-top: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text); font-size: 12px; cursor: pointer; }
.order-refresh-btn:hover { background: #f0f2f7; }
.order-refresh-btn:disabled { cursor: default; opacity: 0.6; }
.info-row .order-refresh-btn { margin-top: 0; padding: 2px 8px; }
.order-address-line { display: block; margin-bottom: 2px; }
.order-label-block { margin-top: 12px; }
.order-label-block .order-notice { margin-top: 8px; }
.order-label-btn { padding: 7px 12px; border: none; border-radius: 4px; background: #059669; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.order-label-btn:disabled { opacity: 0.6; cursor: default; }
.order-label-remove { margin-top: 0; margin-left: 8px; padding: 2px 8px; }
body.no-work .order-label-block { display: none !important; }
.order-track-link { margin-left: 6px; font-size: 12px; color: var(--primary); }
#webmailOrderPanel .info-row { align-items: flex-start; }
#webmailOrderPanel .info-key { min-width: 96px; flex-shrink: 0; }
#webmailOrderPanel .info-row > span:not(.info-key) { overflow-wrap: anywhere; min-width: 0; }
#webmailOrderPanel .order-unit-item { padding: 8px; }
.info-section-title { font-weight: 700; font-size: 12px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
.bezahlt-btn { 
  padding: 4px 12px; 
  font-size: 11px; 
  font-weight: 600; 
  background: var(--primary); 
  color: white; 
  border: none; 
  border-radius: 4px; 
  cursor: pointer; 
  text-transform: none;
  transition: background 0.2s;
}
.bezahlt-btn:hover { background: var(--primary-hover, #2563eb); }
.bezahlt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.storniert-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: none;
  transition: background 0.2s;
}
.storniert-btn:hover { background: #b91c1c; }
.storniert-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kaufland-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  background: #e1e8ff;
  color: #1d4ed8;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.section-divider { border-top: 1px solid var(--border); margin: 16px 0; }
.order-unit-item { margin-bottom: 12px; padding: 0; background: #f9fafb; border-radius: 4px; }
.order-unit-item:last-child { margin-bottom: 0; }
.product-img { max-width: 150px; border: 1px solid var(--border); border-radius: 6px; background: #fff; margin-top: 12px; }
.info-row { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.info-key { font-weight: 700; margin-right: 6px; min-width: 120px; }
.copyable-value { cursor: pointer; transition: all 0.2s; padding: 2px 4px; border-radius: 3px; user-select: none; }
.copyable-value:hover { background: #e5e7eb; color: var(--primary); }
.copyable-value.copied { background: #d1fae5; color: var(--seller); font-weight: 600; }
.copyable-value a { color: inherit; text-decoration: underline; }
.copyable-value a:hover { color: var(--primary); }
.translate-btn { background: #6b7280; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s; }
.translate-btn:hover { background: #4b5563; }
.translate-btn.active { background: #059669; }
.translate-btn.active:hover { background: #047857; }
.op-action-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.op-action-btn { padding: 5px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); cursor: pointer; transition: all 0.15s; }
.op-action-btn:hover { background: #f3f4f6; }
.op-action-btn.active { background: var(--primary, #3b82f6); color: #fff; border-color: var(--primary, #3b82f6); }
.keyword-chip-pool { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; background: #fafafa; font-size: 12px; margin-bottom: 6px; }
.keyword-chip-pool summary { cursor: pointer; font-weight: 600; color: var(--muted); user-select: none; display: flex; align-items: center; gap: 8px; }
.kw-chip-count { display: inline-block; min-width: 18px; padding: 0 6px; height: 18px; line-height: 18px; text-align: center; font-size: 11px; background: var(--primary); color: #fff; border-radius: 9px; }
.kw-chip-count:empty { display: none; }
.kw-chip-categories { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.kw-chip-cat-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.kw-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.kw-chip { padding: 4px 9px; font-size: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); cursor: pointer; transition: all 0.15s; }
.kw-chip:hover { background: #f3f4f6; }
.kw-chip.active { background: var(--primary, #3b82f6); color: #fff; border-color: var(--primary, #3b82f6); }
.op-param-row { display: flex; gap: 6px; margin-bottom: 6px; padding-left: 4px; }
.op-param-btn { padding: 4px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); cursor: pointer; transition: all 0.15s; }
.op-param-btn:hover { background: #f3f4f6; }
.op-param-btn.active { background: #059669; color: #fff; border-color: #059669; }
.product-list { margin-top: 6px; padding-left: 12px; }
.product-item { margin-bottom: 4px; font-size: 13px; }
.messages { flex: 1; overflow-y: auto; padding: 16px; min-height: 0; }
.bubble-row { display: flex; margin-bottom: 10px; }
.bubble-row.left { justify-content: flex-start; }
.bubble-row.right { justify-content: flex-end; }
.bubble { padding: 10px 12px; border-radius: 10px; max-width: 720px; background: #fff; border: 1px solid var(--border); }
.bubble.seller { border-color: #c6f6d5; background: #f0fff4; }
.bubble.buyer { border-color: #bfdbfe; background: #eff6ff; }
.bubble.marketplace { border-color: #ddd6fe; background: #f5f3ff; }
.bubble.system { border-color: #e5e7eb; background: #f9fafb; }
.bubble .meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.bubble .meta .meta-info { min-width: 0; flex: 1; }
.bubble .msg-copy-btn {
  background: #fff;
  color: var(--muted);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.bubble .msg-copy-btn:hover {
  background: #f3f4f6;
  color: var(--primary);
}
.bubble .msg-copy-btn.copied {
  background: #d1fae5;
  color: var(--seller);
  border-color: #a7f3d0;
}
.webmail-raw-inline {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.webmail-attachments-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 8px 10px 0;
  border-top: 1px solid var(--border);
}
.webmail-attachments-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}
.webmail-attachments-list a {
  color: #2563eb;
  text-decoration: underline;
  word-break: break-all;
  flex: 1;
}
.webmail-attachment-size {
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
}
.webmail-raw-inline-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.webmail-raw-inline-body {
  max-height: min(380px, 45vh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f9fafb;
  padding: 8px;
  font-size: 13px;
}
.bubble .translation { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); font-style: italic; }
.bubble .translation-label { font-weight: 600; margin-right: 4px; }
.draft-translation { margin-top: 8px; padding: 8px; background: #f9fafb; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--muted); font-style: italic; }
.draft-translation-label { font-weight: 600; margin-right: 4px; color: var(--text); }
.reply { border-top: 1px solid var(--border); padding: 12px 16px; background: var(--panel); }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal-content { background: white; border-radius: 8px; padding: 24px; min-width: 400px; max-width: 500px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
.modal-header { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text); }
.modal-body { margin-bottom: 16px; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; }
textarea { width: 100%; min-height: 100px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; resize: vertical; }
.actions { margin-top: 8px; display: flex; gap: 12px; align-items: center; }
.ai-suggestion { border-top: 1px solid var(--border); padding: 12px 16px; background: #f9fafb; }
.ai-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 700; font-size: 13px; color: var(--text); }
.ai-actions { display: flex; gap: 8px; }
.ai-textarea { width: 100%; min-height: 120px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; resize: vertical; background: #fff; }
button { background: var(--primary); color: #fff; border: none; padding: 10px 14px; border-radius: 6px; cursor: pointer; font-weight: 700; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button#closeTicketBtn { background: #dc2626; }
button#closeTicketBtn:hover { background: #b91c1c; }
button#closeTicketBtn:disabled { opacity: 0.5; cursor: not-allowed; }
button#cancelOrderBtn { background: #dc2626; }
button#cancelOrderBtn:hover { background: #b91c1c; }
button#cancelOrderBtn:disabled { opacity: 0.5; cursor: not-allowed; }
.status { font-size: 12px; color: var(--muted); }
.status.success { color: var(--seller); font-weight: 700; animation: successPulse 0.6s ease-out; }
@keyframes successPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}
.muted { color: var(--muted); }
.address-block { white-space: pre-line; }
/* Mode Toggle Styles */
.mode-selector { display: flex; border-bottom: 1px solid var(--border); background: #eee; }
.mode-btn { flex: 1; padding: 10px; border: none; background: none; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; }
.mode-btn.active { color: var(--primary); border-bottom: 2px solid var(--primary); background: #fff; }
.hidden { display: none !important; }

/* Permission gating. The server refuses what a role may not do; these rules only hide the
   controls. !important because the script sets inline display on several of these elements. */
body.no-work #replyArea > :not(.actions),
body.no-work #replyArea > .actions > :not(#status) { display: none !important; }
body.no-money #partialRefundBtn,
body.no-money #cancelOrderBtn,
body.no-money #bezahltBtn,
body.no-money #storniertBtn,
body.no-money #partialRefundModal,
body.no-money #miraklRefundModal { display: none !important; }
body.no-resources .mode-selector,
body.no-resources .sidebar .header,
body.no-resources #ticketList,
body.no-resources .main,
body.no-resources .right-panel { display: none !important; }
.no-resources-notice { display: none; grid-column: 2 / -1; align-items: center; justify-content: center; padding: 24px; font-size: 16px; color: var(--muted); text-align: center; }
body.no-resources .no-resources-notice { display: flex; }

/* Until the signed-in user is known the ticket screen stays out of sight and out of reach. */
body.auth-pending .app { visibility: hidden; }
body.auth-pending .auth-overlay { background: var(--bg); }

/* The server has ended the session: nothing of the earlier user stays readable behind the
   sign-in dialog. visibility, not display, so the unsent reply, the attachments and a created
   label are still there when the same user signs in again. */
body.auth-expired .app,
body.auth-expired .modal-overlay,
body.auth-expired #usersOverlay { visibility: hidden; }
body.auth-expired .auth-overlay { background: var(--bg); }
/* Without this the fields with "transition: all" (customer name, order id) would stay visible
   for the length of their transition. */
body.auth-expired .app * { transition: none; }

/* User bar */
.user-bar { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.user-bar-identity { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.user-bar-name { font-weight: 700; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-bar-role { flex-shrink: 0; padding: 1px 6px; font-size: 10px; font-weight: 700; background: #e1e8ff; color: #1d4ed8; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
.user-bar-note { font-weight: 700; color: #b45309; }
.user-bar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.user-bar-btn { padding: 4px 9px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); cursor: pointer; transition: all 0.15s; }
.user-bar-btn:hover { background: #f3f4f6; }

/* Sign-in, change-password and user administration dialogs. They sit above the refund
   modals (z-index 1000); sign-in is the top-most so it can cover any of the others. */
.auth-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center; }
.auth-overlay.active { display: flex; }
#usersOverlay { z-index: 1500; }
#changePasswordOverlay { z-index: 2000; }
#loginOverlay, #serverUnavailableOverlay { z-index: 3000; }
.auth-card { min-width: 0; width: min(420px, 92vw); max-width: none; }
.auth-field { display: block; margin-bottom: 12px; font-size: 13px; }
.auth-field > span { display: block; margin-bottom: 4px; font-weight: 600; }
.auth-input { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text); }
.auth-input:disabled { background: #f0f2f7; color: var(--muted); }
.auth-hint { font-size: 12px; color: var(--muted); margin: -6px 0 12px; line-height: 1.4; }
.auth-notice { margin-bottom: 12px; padding: 8px 10px; border: 1px solid #fde68a; border-radius: 6px; background: #fffbeb; color: #92400e; font-size: 13px; line-height: 1.4; }
.auth-message { min-height: 18px; font-size: 13px; font-weight: 600; color: var(--seller); line-height: 1.4; overflow-wrap: anywhere; }
.auth-message.error { color: #b91c1c; }
.auth-overlay .modal-footer button { padding: 8px 16px; border-radius: 4px; font-weight: 600; }
.btn-secondary { background: #6b7280; }
.btn-danger { background: #dc2626; }
.btn-small { padding: 5px 10px; font-size: 12px; font-weight: 600; }

.users-content { background: #fff; border-radius: 8px; padding: 20px 24px; width: min(1100px, 96vw); max-height: 92vh; overflow-y: auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); font-size: 13px; }
.users-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.users-header .modal-header { margin-bottom: 0; }
.users-section { margin-top: 16px; }
.users-section-title { font-weight: 700; font-size: 12px; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.users-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.users-table { width: 100%; border-collapse: collapse; }
.users-table th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border); background: #fff; }
.users-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.users-table td.nowrap { white-space: nowrap; }
.users-table tr.inactive td { color: var(--muted); }
.users-table .cell-note { font-size: 11px; color: #b45309; }
.resource-kind { font-weight: 600; }
.resource-missing { color: #b91c1c; font-weight: 600; }
.user-form { border: 1px solid var(--border); border-radius: 6px; padding: 14px; background: #f9fafb; }
.user-form-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; overflow-wrap: anywhere; }
.user-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.user-form-check { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.resource-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px; }
.resource-group { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; background: #fff; }
.resource-group-title { font-weight: 700; margin-bottom: 6px; }
.resource-option { display: flex; align-items: flex-start; gap: 6px; padding: 2px 0; overflow-wrap: anywhere; }
.resource-option.all { font-weight: 600; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px dashed var(--border); }
.user-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.user-form-row .auth-field { margin-bottom: 0; flex: 1; min-width: 220px; max-width: 320px; }
.user-form-extra { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--border); }
.audit-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.audit-filters .auth-field { margin-bottom: 0; width: 240px; max-width: 100%; }
.audit-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.audit-list .users-table th { position: sticky; top: 0; }
.users-table tr.audit-failed td { color: #b91c1c; }
.users-table tr.audit-summary td { color: var(--muted); font-style: italic; }