/* ==== THEME TOKENS ==== */
:root{
  --radius:14px; --radius-sm:10px; --shadow:0 8px 28px rgba(0,0,0,.28);
  color-scheme: light dark;
  --transition: all .25s cubic-bezier(.4,.4,.2,1);
}
/* Dark (Default) */
:root:not([data-theme]), :root[data-theme="dark"]{
  --bg:#0f1115; --bg2:#151923; --panel:#121622;
  --text:#e8ecf2; --muted:#9aa4b2; --line:#23293a;
  --brand:#007aff; --accent:#34c759; --warn:#ff9500; --danger:#ff3b30;
  --chip:#1b2232; --chip2:#1b2232;
  --comment-badge-color:#f6f8fb;
}
/* Light */
:root[data-theme="light"]{
  --bg:#f6f8fb; --bg2:#ffffff; --panel:#ffffff;
  --text:#0b0f14; --muted:#5b6676; --line:#e6eaf2;
  --brand:#007aff; --accent:#34c759; --warn:#ff9500; --danger:#ff3b30;
  --chip:#eef3fb; --chip2:#f3f6fb;
  --comment-badge-color:#0f1115;
}

:root[data-theme="light"] #snapLogo {
  content: normal; /* sicherstellen, dass nichts überschrieben wird */
  background-image: url("/assets/images/snapthat_logo_light.png");
}

:root[data-theme="dark"] #snapLogo {
  content: normal;
  background-image: url("/assets/images/snapthat_logo_dark.png");
}



*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a{color:var(--brand);text-decoration:none}
img{max-width:100%}

/* Smooth theme transition */
@media (prefers-reduced-motion: no-preference){
  html, body, .card, .modal .box { transition: background-color .2s, color .2s, border-color .2s; }
}

/* Header */
header{
  position:sticky;top:0;z-index:30;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  backdrop-filter:saturate(1.05) blur(12px);
}
.bar{display:flex;align-items:center;gap:10px;padding:10px 14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(59,130,246,.2)}
.right{margin-left:auto;display:flex;align-items:center;gap:6px}

/* Buttons */
.btn{
  cursor:pointer;border:0;background:var(--bg2);color:var(--text);
  padding:8px 12px;border-radius:12px;
  font-size:14px;line-height:1.2;
  transition: var(--transition);
  font-weight: bold;
  box-shadow: 0 3px 3px rgba(183, 183, 183, 0.25);

}
.btn:hover{filter:brightness(1.08)}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 6px 6px rgba(0,122,255,.25)}
.btn.secondary{background:#f6f6f6;color:#2b2b2b;box-shadow:0 6px 6px rgba(255, 255, 255, 0.25)}
.btn.ghost{background:transparent}
.btn.danger{background:var(--danger);color:#fff}
.btn:disabled{opacity:.6;cursor:not-allowed}

.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--muted);padding:6px 12px;cursor:pointer;transition:var(--transition)}
.seg button.active{background:var(--brand);color:#fff}
.chip{background:var(--chip);border:1px solid var(--line);color:var(--text);padding:5px 9px;border-radius:999px;font-size:13px}

/* Filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.filters input,.filters select{
  background:var(--bg2);border:1px solid var(--line);color:var(--text);
  padding:8px 10px;border-radius:10px;font-size:14px;
}
.filters .grow{flex:1;min-width:200px}

/* Layout */
main{padding:0px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;margin:10px}
.card .head{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}

/* Table / List */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-top:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
.table th{user-select:none;cursor:pointer;position:relative;font-weight:500;font-size:14px}
.table th .sort{position:absolute;right:8px;opacity:.7}
.thumb{width:64px;height:48px;border-radius:12px;border:1px solid var(--line);object-fit:cover;cursor:zoom-in}
.pill{border-radius:999px;padding:4px 10px;font-size:12px;background:var(--bg2);color:var(--comment-badge-color)}
.pill.click{cursor:pointer}
.status-open{background:var(--brand);color:#fff}
.status-in_progress{background:#ff9500;color:#fff}
.status-done{background:var(--accent);color:#fff}
.tag{background:var(--chip2);border:1px solid var(--line);padding:3px 8px;border-radius:999px;color:var(--text);font-size:12px}
.tagbtn{background:var(--chip2);border:1px solid var(--line);padding:3px 8px;border-radius:999px;color:var(--text);font-size:12px;cursor:pointer}
.tagbtn:hover{filter:brightness(1.05)}
.comment-badge{font-size:12px;background:var(--line);border-radius:999px;padding:2px 6px;color:var(--comment-badge-color)}

/* Prio Badges */
.prio-high{background:var(--danger)!important;color:#fff!important}
.prio-medium{background:#6b7280!important;color:#fff!important}
.prio-low{background:var(--accent)!important;color:#0b2911!important}

/* Kanban */
.kanban{display:grid;gap:12px;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);overflow:auto;padding:12px}
.col{background:var(--panel);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;min-height:260px}
.colhead{padding:10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;font-weight:500}
.drop{padding:10px;display:grid;gap:8px;min-height:220px;transition:background .15s}
.drop.over{background:rgba(59,130,246,.08)}
.item{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;gap:6px;transition:var(--transition)}
.item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.item img{cursor:zoom-in}
.dragging{opacity:.6}

/* Modals */
.modal{position:fixed;inset:0;  background: rgba(0,0,0,0.35); 
  backdrop-filter: blur(4px);
  animation: snapFade .2s ease;display:none;align-items:center;justify-content:center;z-index:40;animation:fadeIn .18s}
.modal .box{
  width:min(96vw,1000px);
  max-height:92vh;
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:24px;
  animation:popIn .22s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
#cNew, #cOnlyNew {
  padding: 10px;
  width: 100%;
  border-radius: 15px;
  border: 1px solid #ccc;
  background-color: #fafafa;
}

/* ungelesene Notifications hervorheben */
.notif-item.unread {
  background: #eef6ff;          /* leichtes Blau */
  border-left: 4px solid #0B66FF;
}

.notif-item.unread strong {
  color: #0B66FF;
}


.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top: 30px;
  padding-bottom: 30px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field input,.field select,.field textarea{background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:10px;border-radius:12px}
.muted{color:var(--muted)}
.title-btn{all:unset;cursor:pointer;color:var(--text);font-weight:500}
.title-btn:hover{text-decoration:underline}

/* Auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth .card{width:min(92vw,460px);border-radius:18px;overflow:hidden}

/* Lightbox */
.lb{position:fixed;inset:0;background: rgba(0,0,0,0.35); 
  backdrop-filter: blur(4px);
  animation: snapFade .2s ease;display:none;z-index:60}
.lb img{position:absolute;max-width:92vw;max-height:92vh;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:12px;border:1px solid #000}
.lb:after{content:"✕";position:fixed;top:16px;right:20px;color:#fff;font:700 22px/1 system-ui;cursor:pointer}

/* Avatars */
.avatar{width:35px;height:35px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--bg2);vertical-align:middle;margin-right:6px}
.meta{font-size:12px;color:var(--muted)}

/* Apple Modal extra */
.apple-modal h2{margin:0;font-size:18px;font-weight:600}
.apple-modal .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.apple-modal .sysinfo{
  background:#f9f6f6;
  border-radius:14px;
  padding:14px;
  font-size:13px;
  color:var(--muted);
  margin-top:16px;
  line-height:1.6;
  border:1px solid var(--line);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.05);
}
.apple-modal .sysinfo .row{gap:14px}
.apple-modal .form label{font-size:13px;color:var(--muted);margin-top:10px;display:block}
.apple-modal .form input,.apple-modal .form select{width:100%;padding:10px;font-size:15px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);margin-top:4px}
.apple-modal .screenshot{display:flex;gap:12px;align-items:flex-start}
#eThumb{
  width:100%;
  max-width:320px;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  display:none;
}
.apple-modal .modal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px}

/* Emoji Picker */
.emoji-wrap{position:relative}
.emoji-panel{
  position:absolute; bottom:42px; left:0; z-index:5;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px; display:none;
  box-shadow:0 8px 28px rgba(0,0,0,.25); width:260px; max-height:220px; overflow:auto;
}
.emoji-panel button{font-size:20px; padding:6px; border:0; background:transparent; cursor:pointer; border-radius:8px}
.emoji-panel button:hover{filter:brightness(1.1); background:var(--bg2)}

/* Grids */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.edit-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin-top: 16px;
}

/* Titel */
#eTitle {
  margin: 0 0 10px 0;
  padding: 6px 0;
  font-size: 20px;
  font-weight: 600;
  cursor: text;
}
#eTitle[contenteditable="true"] {
  outline: 2px solid var(--brand);
  border-radius: 6px;
  padding: 4px;
}

/* Tags Chips */
#eTagsChips { margin-bottom: 20px; display:flex; flex-wrap:wrap; gap:6px; }
#eTagsChips .tag { background:var(--chip2); cursor:pointer; }

/* Accordion */
.accordion h4 { cursor:pointer; display:flex; align-items:center; gap:6px; }
.accordion .accordion-content { display:none; margin-top:8px; }
.accordion.open .accordion-content { display:block; }



/* Kommentare */
#commentsBox .comment {
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin-bottom:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
#commentsBox .comment .meta {
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

.comment{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin-bottom:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}

.thumb.placeholder {
  width: 100%;
  height: 180px;
  border: 2px dashed var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--bg2);
}

/* ==== Annotator ==== */
.lb {display:none; align-items:center; justify-content:center;}
.lb .anno-box{
  position:relative;
  background:var(--panel);
  border-radius:20px;
  padding:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:96vw;
  max-height:96vh;
}
.anno-toolbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.anno-stage {
  position: relative;
  
  display: inline-block;
}
#annoImg {
  display: block;
  max-width: 90vw;
  max-height: 70vh;
}
#annoCanvas {
  position: relative;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: auto;
}

.shape-handle{cursor:move}
.anno-toolbar button.active {
  background: var(--brand);
  color: #fff;
}

#snapLogo {
width: 25px;
  height: 25px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 5px;
  margin-right: 0px;
}

#snapModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35); 
  backdrop-filter: blur(4px);
  animation: snapFade .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

}
@keyframes snapFade {
  from { opacity:0 } to { opacity:1 }
}

.snap-modal {
  background: #fff;
  border-radius: 14px;
  max-width: 320px;
  width: 90%;
  padding: 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  animation: snapZoom .25s cubic-bezier(.4,.4,.2,1);
}
@keyframes snapZoom {
  from { transform:scale(.8); opacity:0 }
  to   { transform:scale(1); opacity:1 }
}

.snap-msg {
  font-size: 16px;
  color: #111;
  text-align: center;
  margin-bottom: 15px;
}

.snap-input-wrap {
  margin-bottom: 15px;
}
#snapInput {
  width: 100%;
  padding: 8px 10px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.snap-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.snap-buttons button {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 10px;
  font-size: 15px;
  font-weight: 500;
  transition: background .2s;
  cursor: pointer;
}
.snap-ok {
  background: #007aff;
  color: white;
}
.snap-ok:hover {
  background: #0063d1;
}
.snap-cancel {
  background: #f1f1f1;
}
.snap-cancel:hover {
  background: #e0e0e0;
}
/* ===== Beschreibung / Editor ===== */
.desc-wrap { margin-top: 12px; }
.desc-view {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  overflow: auto;
}
.desc-toolbar {
  display: none; /* nur in Edit-Mode sichtbar */
  gap: 6px; margin: 8px 0;
}
.desc-toolbar .btn { padding: 6px 10px; border-radius: 10px; }
.desc-edit {
  min-height: 160px;
  background: var(--bg2);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 12px;
  outline: none;
  white-space: pre-wrap;
  width: 100%;
}
.desc-edit[contenteditable="true"] img { max-width: 100%; }
.desc-view pre[class*="language-"] {
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* Checklist */
.chk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0;
}

.chk input[type="checkbox"] {
  margin-top: 3px; /* damit mit Text vertikal harmoniert */
  width: 20px;
}

.chk .txtwrap {
  display: flex;
  flex-direction: column;
}

.chk .txt {
  font-size: 15px;
}

.chk.done .txt {
  color: #888;
  text-decoration: line-through;
}

.chk .meta {
  font-size: 12px;
  color: var(--muted);
}

/* Bilder skalieren */
.desc-view img, .desc-edit img {
  max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line);
}
.img-resize-hint { font-size:12px; color:var(--muted); margin-top:4px; display:none; }

.pill-user{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:12px; border:1px solid rgba(255,255,255,.15);
  background:transparent; cursor:pointer; font:inherit; color:inherit;
}
.pill-user:hover{ background:rgba(255,255,255,.06); }
.pill-user .avatar{
  width:35px; height:35px; border-radius:50%; object-fit:cover; display:inline-block;
}

.auth {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  background:linear-gradient(135deg,#ffffff,#f1f1f1);
  font-family:"Rubik",sans-serif;
}

.login-card {
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
  padding:32px;
  max-width:380px;
  width:100%;
  text-align:center;
  animation:fadeIn .6s ease;
}

.login-header {
  margin-bottom:20px;
}

.login-logo {
  max-width:120px;
  margin-bottom:12px;
}

.login-subtitle {
  font-size:14px;
  color:#555;
  line-height:1.4;
}

.field {
  text-align:left;
  margin-bottom:14px;
}

.field label {
  display:block;
  margin-bottom:4px;
  font-size:13px;
  font-weight:500;
}

.field input {
  width:100%;
  padding:10px 12px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:14px;
}

.login-btn {
  width:100%;
  padding:12px;
  font-size:15px;
  border-radius:8px;
  margin-top:8px;
}

.login-footer {
  margin-top:20px;
  font-size:13px;
  color:#777;
}

.login-footer a {
  color:#007bff;
  text-decoration:none;
}
.login-footer a:hover {
  text-decoration:underline;
}

@keyframes fadeIn {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}

/* Einheitliche Größe für Thumbs & Platzhalter */
.thumb, .thumb-placeholder{
  width: 72px;               /* anpassen falls nötig */
  height: 48px;
  border-radius: 8px;
}

/* Bild */
.thumb{
  object-fit: cover;
  background: #f1f5f9;
  display: block;
}

/* Platzhalter */
.thumb-placeholder{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 12px;
  user-select: none;
}
.thumb-placeholder i{ opacity:.7; }

/* ==== Notifications ==== */
.notif-badge{
  position:absolute; top:-4px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px;
  background:#ef4444; color:#fff;
  font-size:11px; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px var(--bg);
}
.notif-list{ max-height:60vh; overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--bg2); }
.notif-item{ display:flex; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.notif-item.unread{ background:rgba(0,122,255,.08); }
.notif-item .meta{ font-size:12px; color:var(--muted); }
.notif-tools{ display:flex; gap:8px; align-items:center; }
.notif-tools .btn{ padding:6px 10px; border-radius:10px; }
.notif-settings-grid{
  display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.notif-settings-grid fieldset{ border:1px solid var(--line); border-radius:12px; padding:12px; }
.notif-settings-grid legend{ font-size:13px; color:var(--muted); padding:0 6px; }

.notif-item { display:flex; gap:10px; padding:10px 12px; cursor:pointer; }
.notif-item .notif-link { display:flex; gap:10px; text-decoration:none; color:inherit; width:100%; }
.notif-item.unread .meta, .notif-item.unread strong { font-weight:600; }
.notif-item:hover { background: rgba(0,0,0,.03); }

/* --- Mentions Dropdown --- */
.mention-popover{
  position:absolute; z-index:9999; background:#fff; border:1px solid rgba(0,0,0,.12);
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  max-height:260px; overflow:auto; min-width:240px;
}
.mention-header{ padding:6px 10px; font-size:12px; color:#64748b; border-bottom:1px solid rgba(0,0,0,.06); }
.mention-item{ display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; }
.mention-item:hover,.mention-item.active{ background:#f0f6ff; }
.mention-name{ font-weight:600; }
.mention-username{ color:#6b7280; font-size:12px; }
.mention-empty{ padding:10px; font-size:12px; color:#9ca3af; }
.mention-item mark{ background:transparent; color:#2563eb; font-weight:700; }

/* Tabs */
#adminTabs {
  display: flex;
  gap: 6px;
  margin: 12px 0;
  background: #f0f0f0;
  border-radius: 10px;
  padding: 10px;
}
#adminTabs button {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
}
#adminTabs button.active {
  background: var(--brand);
  color: #fff !important;
  font-weight: bold;
}

/* User rows */
.user-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 140px 120px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.user-row input, .user-row select {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.tab select {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.row select {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.row input {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.user-row button {
  padding: 4px 8px;
}

/* Stats grid */
.stats-grid {
  display: grid;

  gap: 12px;
}
.stats-card {
  display:flex; gap:10px; 
  background: var(--panel);
  padding:14px; border-radius:12px; box-shadow: var(--shadow);
}


/* Trash */
.trash-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.trash-row small { color: var(--muted); }

/* License */
.license-box {
width: 100%;
}

.license-actions {
  text-align: center;
  align-items: center;
  width: 100%;
  justify-content: center;
  display: grid;
}

/* === Modal Overlay === */
#adminModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

/* === Modal Panel === */
#adminModal .modal-content {
  background: #fff;
  color: #111;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  width: 900px;
  max-width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 40px;
}

.canceled-note {
  padding: 20px 0 0 0;
  text-align: center;
}

/* === Tabs oben === */
#adminTabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.25rem;
}
#adminTabs button {
  padding: .75rem 1rem;
  background: none;
  border: none;
  font-weight: 500;
  cursor: pointer;
  color: #6b7280;
  transition: color .2s, border-color .2s;
}
#adminTabs button.active {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}

/* === Users Tabelle === */
#adminUsers .user-list {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 160px 60px;
  gap: .5rem;
  align-items: center;
}
#adminUsers .user-row { display: contents; }
#adminUsers .user-row div,
#adminUsers .user-row select,
#adminUsers .user-row button {
  padding: .75rem .75rem;
  border-bottom: 1px solid #f0f0f0;
}
#adminUsers .user-row button {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: .4rem .7rem;
  border-radius: 8px;
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s;
}
#adminUsers .user-row button:hover { background:#dc2626; }

/* === Stats-Kacheln === */
#adminStats .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* gleiche Breite */
  gap: 1rem;
}
#adminStats .stats-card {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid #f0f0f0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
#adminStats .stats-card strong { font-size:.95rem; }

/* === Trash-Items === */
#adminTrash .trash-list { display:flex; flex-direction:column; gap:.75rem; }
#adminTrash .trash-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:.75rem 1rem; border-radius:12px;
  border:1px solid #f0f0f0; background:#fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
#adminTrash .trash-row button {
  background:#2563eb; color:#fff;
  border:none; padding:.35rem .75rem;
  border-radius:8px; cursor:pointer;
  transition: background .2s;
}
#adminTrash .trash-row button:hover { background:#1d4ed8; }

/* === License === */
#adminLicense .license-box {
  display:grid; gap:.35rem;
  padding:1rem; border-radius:16px;
  border:1px solid #f0f0f0; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}


.license-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
  padding: 24px;
  text-align: center;
  margin: 30px auto;
  transition: transform 0.2s;
}
.license-card:hover {
  transform: translateY(-2px);
}
.license-card h4 {
  margin-bottom: 18px;
  font-size: 1.4em;
}
.license-btn {
  background: #41b1cd;
  color: #fff;
  border-radius: 8px;
  padding: 12px 20px;
  margin-bottom: 22px;
  font-weight: bold;
}
.feature-compare table {
  width: 100%;
  border-collapse: collapse;
}
.feature-compare th,
.feature-compare td {
  padding: 12px;
  border-bottom: 1px solid #eaeaea;
}
.feature-compare th {
  background: #f5f7fa;
  font-weight: bold;
}
.feature-compare td:first-child {
  font-weight: 500;
  text-align: left;
}


.license-card {
  background: var(--panel, #1e2230);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  margin: 10px 0;
  transition: transform .2s ease, box-shadow .2s ease;
  width: 100%;
}
.license-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.license-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.license-header h3 {
  margin: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-tag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-tag.active { background: #2ecc71; color: #fff; }
.status-tag.past_due { background: #f39c12; color: #fff; }
.status-tag.canceled { background: #e74c3c; color: #fff; }
.license-details {
  margin-bottom: 14px;
  line-height: 1.6;
}
.license-details div {
  margin: 4px 0;
}
.license-actions {

  gap: 10px;
}


.profile-modal .profile-section {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-modal .avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg2);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.profile-modal .divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}

.flex1 {
  flex: 1;
}


.profile-card {
  text-align: center;
  margin: 20px 0;
}
.avatar-lg {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-bottom: 12px;
}
.badge {
  display: inline-block;
  background: #007aff;
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}
.input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line, #ccc);
  border-radius: 6px;
}


input, textarea, select {
  background-color: #f6f6f6 !important;
}


td div.row {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.seo-text {
  color: #f8f8f8;
  font-size: 10px;
}