/* Base theme tokens (do not override these via inline settings) */
:root{  --self-define-btn-bg: var(--self-define-btn-bg-light, #f6f6f6);
  --self-define-btn-color: var(--self-define-btn-color-light, #111111);
  --pick-problems-btn-color: var(--pick-problems-btn-color-light, #111111);
  --problem-btn-color: var(--problem-btn-color-light, #111111);
  --problem-btn-bg: var(--problem-btn-bg-light, var(--btn2-base-light));
  --create-save-btn-bg: var(--create-save-btn-bg-light, var(--btn-base-light));
  --create-save-btn-color: var(--create-save-btn-color-light, var(--btn-text-base-light));
  --create-cancel-btn-bg: var(--create-cancel-btn-bg-light, var(--btn2-base-light));
  --create-cancel-btn-color: var(--create-cancel-btn-color-light, var(--btn2-text-base-light));
--bg:#0b0f14;--panel:#121826;--text:#e6edf3;--muted:#9aa4b2;--line:#243042;--danger:#d73a49;--topbar:#0f1624;--input:#0f1624;--tablehead:#0f1624;
  --btn-base-dark:#1f6feb;--btn2-base-dark:#2d333b;--btn-text-base-dark:#ffffff;--btn2-text-base-dark:var(--text);
  --portal-color-base-dark:var(--text);
}
html[data-theme="light"]{--bg:#f6f8fa;--panel:#ffffff;--text:#111827;--muted:#4b5563;--line:#e5e7eb;--danger:#d73a49;--topbar:#ffffff;--input:#ffffff;--tablehead:#f3f4f6;
  --btn-base-light:#2563eb;--btn2-base-light:#e5e7eb;--btn-text-base-light:#ffffff;--btn2-text-base-light:var(--text);
  --portal-color-base-light:var(--text);
}
html[data-theme="dark"]{
  /* In dark mode, keep "Problem selbst definieren" on the dark defaults (independent from admin light-mode color settings) */
  --self-define-btn-bg: var(--btn2-base-dark);
  --self-define-btn-color: var(--btn2-text-base-dark);
  --pick-problems-btn-color: var(--text);
  --problem-btn-color: var(--text);
  --problem-btn-bg: var(--btn2);
  --create-save-btn-bg: var(--btn);
  --create-save-btn-color: var(--btn-text);
  --create-cancel-btn-bg: var(--btn2);
  --create-cancel-btn-color: var(--btn2-text);
}

html[data-theme="dark"][data-dark-defaults="1"]{--bg:var(--adm-dark-bg);--panel:var(--adm-dark-panel);--text:var(--adm-dark-text);--muted:var(--adm-dark-muted);--line:var(--adm-dark-line);--danger:var(--adm-dark-danger);--topbar:var(--adm-dark-topbar);--input:var(--adm-dark-input);--tablehead:var(--adm-dark-tablehead);}


/* Computed theme tokens (can be overridden via inline settings) */
:root{
  --btn: var(--btn-custom-dark, var(--btn-base-dark));
  --btn2: var(--btn2-custom-dark, var(--btn2-base-dark));
  --btn-text: var(--btn-text-dark, var(--btn-text-base-dark));
  --btn2-text: var(--btn2-text-dark, var(--btn2-text-base-dark));
  --portal-color: var(--portal-color-dark, var(--portal-color-base-dark));
}

html[data-theme="light"]{
  --btn: var(--btn-custom-light, var(--btn-base-light));
  --btn2: var(--btn2-custom-light, var(--btn2-base-light));
  --btn-text: var(--btn-text-light, var(--btn-text-base-light));
  --btn2-text: var(--btn2-text-light, var(--btn2-text-base-light));
  --portal-color: var(--portal-color-light, var(--portal-color-base-light));
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--portal-color);text-decoration:underline}
a:hover{filter:brightness(1.1)}

.container{max-width:calc(var(--page-width,100)*1vw);margin:0 auto;padding:0 16px}
.topbar{background:var(--topbar);border-bottom:1px solid var(--line);position:relative}
.topbar .container{display:flex;align-items:center;gap:18px;padding:14px 16px}
.topbar .container.topbar-wrap{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px}
.topbar .container.topbar-wrap .topbar-row1{display:flex;align-items:center;gap:18px}
.topbar .container.topbar-wrap .topbar-row2{display:flex;align-items:center}
.topbar-zone{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1}
.topbar-zone-left{justify-content:flex-start}
.topbar-zone-center{justify-content:center}
.topbar-zone-right{justify-content:flex-end}
.brand{color:var(--text);text-decoration:none;font-weight:700;display:flex;align-items:center;gap:10px}
.brand-logo{display:block}
.topbar-logos{display:flex;align-items:center;gap:10px}
.topbar-logos-center{flex:1;justify-content:center}
.topbar-logos-right{justify-content:flex-end}
.no-drag{-webkit-user-drag:none;user-select:none;user-drag:none}
.brand-text{color:var(--portal-color);font-size:var(--portal-size,18px);font-weight:var(--portal-bold,700);font-style:var(--portal-italic,normal);text-decoration:var(--portal-underline,none)}
.nav{display:flex;align-items:center;gap:12px}
.nav a{color:var(--muted);text-decoration:none;margin-right:0}
.nav a:hover{color:var(--text)}
.main{padding:20px 16px}
.footer{border-top:1px solid var(--line);padding:16px 0;color:var(--muted)}
h1{margin:0 0 16px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 16px 0}
.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{color:var(--muted);font-weight:600;text-align:left;background:var(--tablehead)}
.table tbody tr:nth-child(odd){background:var(--table-odd, transparent)}
.table tbody tr:nth-child(even){background:var(--table-even, transparent)}

html[data-theme="dark"] body{--table-odd:transparent !important;--table-even:transparent !important}

.fixed-menu-light .topbar{background:#ffffff}
.fixed-menu-light .nav a{color:#4b5563}
.fixed-menu-light .nav a:hover{color:#111827}
.fixed-menu-light .brand{color:#111827}
.fixed-menu-light .brand-text{color:var(--portal-color);font-size:var(--portal-size,18px);font-weight:var(--portal-bold,700);font-style:var(--portal-italic,normal);text-decoration:var(--portal-underline,none)}
.fixed-menu-light .theme-toggle{background:#e5e7eb;color:#111827}

.hide-headings h1{display:none}

.pager{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 20px 0}
.page{display:inline-block;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);text-decoration:none;color:var(--text)}
.page.current{background:var(--tablehead);color:var(--text);font-weight:700}

.orderbox{display:flex;flex-direction:column;gap:6px}
.orderrow{display:flex;align-items:center;gap:8px}
.orderrow span{flex:1}
.btn{display:inline-block;background:var(--btn);color:var(--btn-text, #ffffff);padding:8px 12px;border-radius:10px;text-decoration:none;border:0;cursor:pointer;font-size:var(--btn-font-size,14px)}
.btn.secondary{background:var(--btn2);color:var(--btn2-text)}
.btn.danger{background:var(--danger)}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
input,select,textarea{background:var(--input);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px}

/* Make color inputs show an actual palette/swatches instead of a thin line */
input[type="color"]{
  padding:0;
  width:72px;
  height:42px;
  border-radius:10px;
  overflow:hidden;
}

/* Ticket photo preview + modal */
.ticket-photo-preview{
  max-width: min(100%, var(--ticket-photo-preview-max-width,400px));
  height:auto;
  border-radius:10px;
  cursor: zoom-in;
}

.photo-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
}
.photo-modal.open{display:flex;}
.photo-modal-inner{
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  max-width: 92vw;
  max-height: 92vh;
}
.photo-modal.open .photo-modal-inner{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.photo-modal-inner img{
  max-width: 92vw;
  max-height: 92vh;
  width:auto;
  height:auto;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
input[type="color"]::-webkit-color-swatch{border:0;border-radius:10px}
input[type="color"]::-moz-color-swatch{border:0;border-radius:10px}

.theme-toggle{width:var(--theme-toggle-size,34px);height:var(--theme-toggle-size,34px);padding:0;border-radius:10px;line-height:1;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;font-size:calc(var(--theme-toggle-size,34px) * 0.6)}
.theme-toggle-edge{position:absolute;right:16px;top:14px;margin-left:0}
.hide-headings h1{display:none}
.checklist{display:flex;flex-direction:column;gap:6px}
.checkitem{display:flex;gap:8px;align-items:center;color:var(--text)}
.checkitem input{width:16px;height:16px}
label{color:var(--muted);font-size:14px}
.form-actions{display:flex;gap:10px}
.val{color:#ff7b72;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.link{color:inherit;text-decoration:none}
.link:hover{border-color:#3b82f6}
.loc-field{flex:1 1 0;min-width:220px;display:flex;flex-direction:column;gap:6px}
#locRow{display:flex;flex-direction:row;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dl{display:grid;grid-template-columns:220px 1fr;gap:8px 12px;margin:0}
.dl dt{color:var(--muted)}

.muted{color:var(--muted)}

.problem-toolbar{display:flex;gap:10px;align-items:center}
.problem-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.problem-btn{background:var(--problem-btn-bg,var(--btn2));color:var(--problem-btn-color,var(--text));border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:var(--problem-btn-font-size,14px)}
.problem-btn.selected{outline:2px solid var(--line)}

.create-form .form-row > label{
  font-size: var(--create-label-font-size,14px);
  color: var(--create-label-color-current,var(--muted));
  font-weight: var(--create-label-font-weight,400);
}

html[data-theme="light"] .create-form{--create-label-color-current: var(--create-label-color-light,#111111);} 
html[data-theme="dark"] .create-form{--create-label-color-current: var(--create-label-color-dark,var(--text));}

html[data-theme="light"] .create-form{
  --self-define-btn-bg: var(--self-define-btn-bg-light,#f6f6f6);
  --self-define-btn-color: var(--self-define-btn-color-light,#111111);
  --pick-problems-btn-color: var(--pick-problems-btn-color-light,#111111);
  --problem-btn-bg: var(--problem-btn-bg-light,var(--btn2-base-light));
  --problem-btn-color: var(--problem-btn-color-light,#111111);
  --create-save-btn-bg: var(--create-save-btn-bg-light,var(--btn-base-light));
  --create-save-btn-color: var(--create-save-btn-color-light,var(--btn-text-base-light));
  --create-cancel-btn-bg: var(--create-cancel-btn-bg-light,var(--btn2-base-light));
  --create-cancel-btn-color: var(--create-cancel-btn-color-light,var(--btn2-text-base-light));
}

.create-form .create-save{background:var(--create-save-btn-bg,var(--btn));color:var(--create-save-btn-color,var(--btn-text))}
.create-form .create-cancel{background:var(--create-cancel-btn-bg,var(--btn2));color:var(--create-cancel-btn-color,var(--btn2-text))}


.pick-problems-btn.pick-no-button{
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.pick-problems-btn.picked.pick-bold{font-weight:700}
.pick-problems-btn.picked.pick-italic{font-style:italic}
.pick-problems-btn.picked.pick-underline{text-decoration:underline}


/* Admin – Einstellungen */
.settings-h{margin:14px 0 8px 0}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:0 0 10px 0}
.settings-full{grid-column:1/-1}

/* Keep rows aligned even when descriptions wrap to 2 lines */
.settings-grid .form-row{min-height:110px}

/* Pager */
.pager{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
.pager .page,.pager-link{padding:6px 10px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text)}
.pager .current,.pager-current{padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.pager-pages{display:flex;gap:6px;flex-wrap:wrap}

/* "Löschen" als Link statt großer Button */
.linkbtn{background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;text-decoration:underline}
.linkbtn.danger{color:var(--danger)}

.inactive td{opacity:.6}


/* fix: right logos flush next to theme toggle */
.topbar-zone-right{justify-content:flex-end;flex-wrap:nowrap;gap:8px}
.topbar-zone-right .brand-logo-link{display:flex;align-items:center}
.topbar-right-content{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.topbar-right-content-start{justify-content:flex-start}
.topbar-right-content-end{justify-content:flex-end}

/* Admin Dashboard / Log Modernisierung */
.admin-dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.dashboard-card{min-height:120px}
.dashboard-card-wide{grid-column:1/-1}
.dashboard-number{font-size:28px;font-weight:800;margin:8px 0 0 0}
.compact-table th,.compact-table td{padding:8px;font-size:13px}
.log-filter-form{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.log-table-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px}
.log-table-wrap{width:100%;overflow:auto}
.log-table{border:0;border-radius:0;min-width:1100px}
.log-table th{position:sticky;top:0;z-index:2;white-space:nowrap}
.log-table td{font-size:13px;line-height:1.35}
.log-table .nowrap{white-space:nowrap}
.log-message{min-width:260px;max-width:520px}
.log-path{max-width:320px;word-break:break-all}
.log-level{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-weight:700;font-size:12px;background:var(--tablehead);color:var(--text)}
.log-level-error{background:#dc2626;color:white}
.log-level-warning{background:#f59e0b;color:#111827}
.log-level-info{background:#2563eb;color:white}
.dashboard-config-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:10px}
.dashboard-config-card{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:12px}
.dashboard-config-card.is-hidden{opacity:.55;filter:grayscale(.5)}
.dashboard-config-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dashboard-config-actions .btn{padding:5px 9px}

/* Footer-App-Uploads */
.footer-admin-card .settings-grid .form-row{min-height:auto}
.upload-current{margin-top:8px;color:var(--muted);font-size:13px}
.upload-delete-under{display:block;margin-top:8px;text-align:left}
.footer-logo-preview{margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--bg);display:inline-flex;align-items:center;max-width:100%}
.footer-logo-preview img{width:auto;display:block;max-width:260px}
.footer-store-item{display:inline-flex;align-items:center}
.footer-store-badge{width:auto;display:block}
@media (max-width:700px){.footer-store-badge{max-height:80px}.dashboard-config-card{align-items:flex-start;flex-direction:column}.admin-dashboard-grid{grid-template-columns:1fr}}

/* Moderne Admin-Detailseiten */
.detail-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,var(--panel),var(--bg))}
.detail-title{font-size:26px;font-weight:800;margin:0 0 6px 0;word-break:break-word}
.detail-subtitle{color:var(--muted);margin:0;font-size:14px}
.detail-pill-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.detail-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--tablehead);border:1px solid var(--line);font-weight:700;font-size:13px;color:var(--text)}
.detail-pill.good{background:#16a34a;color:#fff;border-color:#16a34a}.detail-pill.warn{background:#f59e0b;color:#111827;border-color:#f59e0b}.detail-pill.bad{background:#dc2626;color:#fff;border-color:#dc2626}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:16px}
.detail-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;overflow:hidden}
.detail-card h2{margin:0 0 12px 0;font-size:18px}
.kv-grid{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:9px 12px;align-items:start}
.kv-grid dt{color:var(--muted);font-size:13px}.kv-grid dd{margin:0;word-break:break-word}.kv-grid .wide{grid-column:1/-1}.kv-grid code{white-space:normal;word-break:break-all}
.modern-table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel);margin-bottom:16px}
.modern-table{width:100%;border-collapse:separate;border-spacing:0;min-width:900px;border:0;background:transparent}
.modern-table th,.modern-table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.modern-table th{position:sticky;top:0;background:var(--tablehead);color:var(--muted);z-index:1;font-weight:700;white-space:nowrap}
.modern-table tr:last-child td{border-bottom:0}.modern-table td{font-size:13px;line-height:1.4}.modern-table .nowrap{white-space:nowrap}.modern-table .path-cell,.modern-table .token-cell{word-break:break-all;max-width:360px}
.detail-pre{white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px;max-height:420px;overflow:auto}
@media (max-width:700px){.kv-grid{grid-template-columns:1fr}.kv-grid dt{margin-top:8px}.detail-title{font-size:22px}.detail-hero{padding:14px}}
.log-level-warn{background:#f59e0b;color:#111827}

.theme-toggle-inline{position:static;margin-left:8px;flex:0 0 auto}
.footer.footer-fixed-light{background:#ffffff;color:#4b5563;border-top-color:#e5e7eb}
.footer.footer-fixed-light a{color:#111827}