/* PWA & iOS Optimizations */
:root {
  /* iOS Safe Area Support */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Disable tap highlight on iOS */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Better touch feedback for interactive elements */
a, button, input, select, textarea {
  -webkit-tap-highlight-color: rgba(88, 166, 255, 0.2);
  touch-action: manipulation;
}

/* iOS Safe Areas for body */
body {
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
  /* Prevent pull-to-refresh on iOS */
  overscroll-behavior-y: contain;
}

/* Header with safe area consideration */
header {
  padding-top: calc(16px + var(--safe-area-inset-top));
  padding-left: calc(24px + var(--safe-area-inset-left));
  padding-right: calc(24px + var(--safe-area-inset-right));
}

/* Container with safe area consideration */
.container {
  padding-left: calc(24px + var(--safe-area-inset-left));
  padding-right: calc(24px + var(--safe-area-inset-right));
}

/* Smooth scrolling for iOS */
html {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Prevent zoom on input focus (iOS) */
input, select, textarea {
  font-size: 16px !important;
}

/* Better button touch targets for iOS */
button, .btn, a.btn {
  min-height: 44px;
  min-width: 44px;
}

/* PWA Standalone Mode Detection */
@media (display-mode: standalone) {
  /* Additional spacing when running as standalone app */
  body {
    padding-top: calc(var(--safe-area-inset-top) + 8px);
  }
  
  /* Hide elements that might be confusing in standalone mode */
  .browser-only {
    display: none !important;
  }
}

/* iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
  /* Fix for iOS Safari bottom bar */
  body {
    min-height: -webkit-fill-available;
  }
  
  html {
    height: -webkit-fill-available;
  }
}

/* Dark Mode Color Palette */
:root{
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --bg-card: #1c2128;
  --border-color: #30363d;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --accent-primary: #58a6ff;
  --accent-hover: #79c0ff;
  --success: #3fb950;
  --warning: #d29922;
  --danger: #f85149;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body{
  margin:0;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
}

/* Header & Footer */
header{
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border-color);
  padding:16px 24px;
  backdrop-filter:blur(8px);
  position:relative;
  z-index:10000;
}
footer{
  background:var(--bg-secondary);
  border-top:1px solid var(--border-color);
  padding:12px 24px;
  font-size:14px;
  color:var(--text-secondary);
  text-align:center;
}

.container{max-width:1400px;margin:0 auto;padding:24px;}

/* Navigation */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  max-width:1400px;
  margin:0 auto;
}

.nav-left{
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:wrap;
}

.nav-right{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-left:auto;
}

/* Navigation Links */
nav a{
  position:relative;
  color:var(--text-secondary);
  text-decoration:none;
  padding:8px 16px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  transition:all 0.2s;
  white-space:nowrap;
}

nav a:hover{
  color:var(--text-primary);
  background:var(--bg-tertiary);
}

nav a::after{
  content:'';
  position:absolute;
  bottom:6px;
  left:16px;
  right:16px;
  height:2px;
  background:var(--accent-primary);
  border-radius:2px;
  transform:scaleX(0);
  transition:transform 0.2s;
}

nav a:hover::after{
  transform:scaleX(1);
}

nav form{
  margin:0;
  padding:0;
  border:none;
  background:transparent;
}

/* User Badge */
.user-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:6px 14px;
  border-radius:8px;
  transition:all 0.2s;
}
.user-badge:hover{
  border-color:var(--accent-primary);
  box-shadow:0 0 0 1px rgba(88, 166, 255, 0.2);
}
.user-icon{
  font-size:16px;
  line-height:1;
  opacity:0.8;
}
.user-name{
  color:var(--text-primary);
  font-weight:500;
  font-size:14px;
  white-space:nowrap;
}

/* Logout Button */
.btn-logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:rgba(248, 81, 73, 0.08);
  color:var(--danger);
  border:none;
  padding:7px 14px;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  transition:all 0.2s;
  font-family:inherit;
  letter-spacing:0.01em;
}
.btn-logout::before{
  content:'→';
  font-size:14px;
  font-weight:bold;
  transition:transform 0.2s;
}
.btn-logout:hover{
  background:rgba(248, 81, 73, 0.15);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(248, 81, 73, 0.2);
}
.btn-logout:hover::before{
  transform:translateX(2px);
}
.btn-logout:active{
  transform:translateY(0);
  box-shadow:0 1px 4px rgba(248, 81, 73, 0.2);
}

/* Typography */
h1{margin:0 0 24px 0;font-size:32px;font-weight:600;color:var(--text-primary);}
h2{margin:32px 0 16px 0;font-size:24px;font-weight:600;color:var(--text-primary);}

/* List Info Card */
.list-info{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:12px 16px;
  border-radius:12px;
  margin-bottom:24px;
  line-height:1.8;
}
.list-info strong{color:var(--text-primary);font-weight:600;}

/* List Info Header (immer sichtbar) */
.list-info-header{
  display:flex;
  justify-content:space-between;
const csrfToken = document.getElementById("quickCsrf") ? document.getElementById("quickCsrf").value : "";
  gap:16px;
  cursor:pointer;
  user-select:none;
}

.list-info-main{
  flex:1;
}

.list-info-main > div{
  margin-bottom:8px;
}

.list-info-main > div:last-child{
  margin-bottom:0;
}

/* Toggle Button */
.list-info-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:4px;
  transition:all 0.2s;
  flex-shrink:0;
}

.list-info-toggle:hover{
  transform:scale(1.1);
}

.list-info-toggle:active{
  transform:scale(0.95);
}

.toggle-icon{
  font-size:20px;
  transition:transform 0.3s;
  display:inline-block;
  color:var(--text-secondary);
}

.list-info.collapsed .toggle-icon{
  transform:rotate(-90deg);
}

/* Details Section (ausklappbar) */
.list-info-details{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border-color);
  transition:all 0.3s ease-in-out;
  overflow:hidden;
}

.list-info.collapsed .list-info-details{
  max-height:0;
  margin-top:0;
  padding-top:0;
  border-top:none;
  opacity:0;
  visibility:hidden;
}

/* New Entry Card */
.new-entry-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:12px 16px;
  border-radius:12px;
  margin-bottom:24px;
  line-height:1.8;
}

.new-entry-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  cursor:pointer;
  user-select:none;
}

.new-entry-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:4px;
  transition:all 0.2s;
  flex-shrink:0;
}

.new-entry-toggle:hover{
  transform:scale(1.1);
}

.new-entry-toggle:active{
  transform:scale(0.95);
}

.new-entry-toggle .toggle-icon{
  font-size:20px;
  transition:transform 0.3s;
  display:inline-block;
  color:var(--text-secondary);
}

.new-entry-card.collapsed .toggle-icon{
  transform:rotate(-90deg);
}

.new-entry-form{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border-color);
  transition:all 0.3s ease-in-out;
  overflow:hidden;
}

.new-entry-card.collapsed .new-entry-form{
  max-height:0;
  margin-top:0;
  padding-top:0;
  border-top:none;
  opacity:0;
  visibility:hidden;
}

/* Tabs */
.tabs-container{
  margin-bottom:24px;
}
.tabs{
  display:flex;
  gap:8px;
  border-bottom:2px solid var(--border-color);
}
.tab-button{
  background:transparent;
  border:none;
  color:var(--text-secondary);
  padding:12px 20px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  transition:all 0.2s;
  position:relative;
}
.tab-button:hover{
  color:var(--text-primary);
  background:var(--bg-tertiary);
}
.tab-button.active{
  color:var(--accent-primary);
  border-bottom-color:var(--accent-primary);
}
.tab-count{
  display:inline-block;
  background:var(--bg-tertiary);
  color:var(--text-secondary);
  padding:2px 8px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  margin-left:6px;
  min-width:24px;
  text-align:center;
}
.tab-button.active .tab-count{
  background:var(--accent-primary);
  color:#ffffff;
}

/* Lists Grid */
.lists-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
  gap:20px;
}

/* List Card */
.list-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:20px;
  transition:border-color 0.2s, box-shadow 0.2s, opacity 0.15s ease-in-out;
  animation:fadeIn 0.15s ease-in-out;
}
@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(-5px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.list-card:hover{
  border-color:var(--accent-primary);
  box-shadow:0 0 0 1px var(--accent-primary);
}

.list-card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:16px;
  gap:12px;
}
.list-card-header h3{
  margin:0;
  font-size:20px;
  font-weight:600;
  color:var(--text-primary);
  line-height:1.3;
}

.list-card-badges{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}

.list-status-badge{
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  white-space:nowrap;
}
.list-status-badge.status-active{
  background:rgba(210, 153, 34, 0.15);
  color:var(--warning);
  border:1px solid rgba(210, 153, 34, 0.3);
}
.list-status-badge.status-inactive{
  background:rgba(63, 185, 80, 0.15);
  color:var(--success);
  border:1px solid rgba(63, 185, 80, 0.3);
}

.list-role-badge{
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  white-space:nowrap;
  background:rgba(88, 166, 255, 0.15);
  color:var(--accent-primary);
  border:1px solid rgba(88, 166, 255, 0.3);
}

.list-card-body{
  margin-bottom:16px;
}

.list-card-field{
  margin-bottom:12px;
}
.list-card-field .field-label{
  display:block;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-secondary);
  margin-bottom:4px;
}
.list-card-field .field-value{
  display:block;
  color:var(--text-primary);
  font-size:14px;
}

.list-card-stats{
  display:flex;
  gap:12px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border-color);
}
.stat-item{
  flex:1;
  text-align:center;
}
.stat-number{
  display:block;
  font-size:24px;
  font-weight:700;
  line-height:1;
  margin-bottom:4px;
}
.stat-label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-secondary);
}
.stat-open .stat-number{color:var(--warning);}
.stat-done .stat-number{color:var(--success);}
.stat-total .stat-number{color:var(--accent-primary);}

.list-card-footer{
  display:flex;
  gap:8px;
  justify-content:center;
}
.list-card-footer .btn{
  flex:1;
  text-align:center;
}

/* Empty State */
.empty-state{
  text-align:center;
  padding:60px 20px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:12px;
}
.empty-state p{
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:20px;
}

/* Admin Tables */
table{
  width:100%;
  border-collapse:collapse;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:12px;
  overflow:hidden;
}
table thead{
  background:var(--bg-tertiary);
}
table thead th{
  padding:12px 16px;
  text-align:left;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-secondary);
  border-bottom:2px solid var(--border-color);
}
table tbody td{
  padding:12px 16px;
  border-bottom:1px solid var(--border-color);
  color:var(--text-primary);
}
table tbody tr:last-child td{
  border-bottom:none;
}
table tbody tr:hover{
  background:var(--bg-tertiary);
}

/* Form Styling */
form{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  padding:24px;
  border-radius:12px;
}

/* Inline forms (z.B. Logout, Delete buttons) */
form.inline-form,
table form,
nav form,
.invitation-actions form{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-block;
}

form label{display:block;margin-bottom:16px;color:var(--text-primary);}
form label strong{display:block;margin-bottom:8px;font-size:14px;font-weight:600;}
form input, form textarea, form select{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--border-color);
  border-radius:6px;
  font-family:inherit;
  font-size:14px;
  background:var(--bg-tertiary);
  color:var(--text-primary);
  transition:border-color 0.2s, background 0.2s;
}
form input:focus, form textarea:focus, form select:focus{
  outline:none;
  border-color:var(--accent-primary);
  background:var(--bg-secondary);
}
form input::placeholder, form textarea::placeholder{color:var(--text-secondary);}
form textarea{resize:vertical;min-height:100px;}

/* Card-Based Layout (Desktop & Mobile) */
#items{display:block;background:transparent;border:none;}
#items thead{display:none;}
#items tbody{display:grid;grid-template-columns:repeat(auto-fill, minmax(400px, 1fr));gap:16px;padding:0;}

#items tr{
  display:flex;
  flex-direction:column;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:20px;
  transition:border-color 0.2s, box-shadow 0.2s;
  position:relative;
}

#items tr:hover{
  border-color:var(--accent-primary);
  box-shadow:0 0 0 1px var(--accent-primary);
}

#items td:not(.item-card-cell){
  display:block;
  border:none;
  padding:0;
  margin-bottom:12px;
}

#items td:not(.item-card-cell):last-child{margin-bottom:0;}

/* Field Labels */
.item-field{margin-bottom:12px;}
.item-field:last-of-type{margin-bottom:0;}
.field-label{
  display:block;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-secondary);
  margin-bottom:4px;
}
.field-value{
  color:var(--text-primary);
  font-size:14px;
  line-height:1.6;
  word-wrap:break-word;
}

/* Thema field - larger */
td[data-field="topic"] .field-value{
  font-size:18px;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:8px;
}

/* Comment field */
td[data-field="comment"] .field-value{
  white-space:pre-wrap;
  color:var(--text-secondary);
  line-height:1.7;
}

/* Button Styling */
.btn{
  display:inline-block;
  background:var(--accent-primary);
  color:#ffffff;
  padding:10px 16px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  transition:background 0.2s;
  text-decoration:none;
  font-family:inherit;
  line-height:1.5;
  vertical-align:middle;
  text-align:center;
  box-sizing:border-box;
}
.btn:hover{background:var(--accent-hover);}
.btn.secondary,.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);}
.btn.secondary:hover,.btn-secondary:hover{background:var(--bg-secondary);}
.btn-small{
  padding:8px 12px;
  font-size:13px;
  line-height:1.4;
}
.btn-success{background:var(--success);}
.btn-success:hover{background:#2ea043;}
.btn-danger{background:var(--danger);}
.btn-danger:hover{background:#da3633;}

/* New Item Card Layout */
.item-card-cell{
  padding:0 !important;
  margin:0 !important;
}

.item-card{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Thumbnail at Top */
.item-card-thumbnail{
  width:100%;
  height:140px;
  padding:0;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.thumbnail-placeholder{
  width:100%;
  height:100%;
  background:var(--bg-secondary);
  border:none;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-secondary);
}

/* Content Area */
.item-card-content{
  display:flex;
  flex-direction:column;
  padding:16px;
  gap:0;
}

.item-card-main{
  width:100%;
}

/* Topic and Comment styling in new layout */
.field-value-topic{
  font-size:19px;
  font-weight:600;
  color:var(--text-primary);
  line-height:1.3;
}

.field-value-comment{
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.6;
  white-space:pre-wrap;
  max-height:none;
  overflow-y:visible;
}

/* Meta Info Row */
.item-card-meta{
  display:flex;
  gap:24px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border-color);
  flex-wrap:wrap;
}

.item-card-meta .item-field{
  margin-bottom:0;
  flex:1;
  min-width:150px;
}

/* Action Buttons Row */
.item-card-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  padding-bottom:14px;
  border-top:1px solid var(--border-color);
}

.action-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}

/* Hold to Complete Button Area */
.item-card-toggle{
  padding:0;
  margin:0;
  margin-top:6px;
}

.item-card-toggle .mobile-quick-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  margin:0;
  padding:0;
  background:var(--bg-tertiary);
  border:2px solid var(--border-color);
  border-radius:8px;
  color:var(--text-primary);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:border-color 0.2s, box-shadow 0.2s, background 0.2s;
  position:relative;
  overflow:hidden;
  touch-action:manipulation;
}

.item-card-toggle .mobile-quick-toggle .progress-fill{
  display:none !important;
}

.item-card-toggle .mobile-quick-toggle .toggle-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
  z-index:1;
  padding:12px 16px;
}

.item-card-toggle .mobile-quick-toggle .toggle-icon{
  font-size:20px;
}

.item-card-toggle .mobile-quick-toggle .toggle-text{
  font-weight:600;
}

.item-card-toggle .mobile-quick-toggle:hover{
  background:var(--bg-secondary);
}

.item-card-toggle .mobile-quick-toggle:active{
  transform:scale(0.98);
}

.item-card-toggle .mobile-quick-toggle[data-status="open"]{
  border:2px solid rgba(63,185,80,0.5);
  color:var(--success);
}

.item-card-toggle .mobile-quick-toggle[data-status="done"]{
  border:2px solid rgba(210,153,34,0.5);
  color:var(--warning);
}

.item-card-toggle .mobile-quick-toggle.holding{
  border-width:3px;
}

.item-card-toggle .mobile-quick-toggle[data-status="open"].holding{
  border:3px solid var(--success);
  box-shadow:0 0 0 2px rgba(63,185,80,0.3);
  background:rgba(63,185,80,0.1);
}

.item-card-toggle .mobile-quick-toggle[data-status="done"].holding{
  border:3px solid var(--warning);
  box-shadow:0 0 0 2px rgba(210,153,34,0.3);
  background:rgba(210,153,34,0.1);
}

/* Mobile Optimizations for Card Layout */
@media (max-width: 767px) {
  .item-card-content{
    padding:12px;
  }

  .item-card-meta{
    flex-direction:column;
    gap:12px;
  }

  .item-card-meta .item-field{
    min-width:100%;
  }

  .item-card-actions{
    flex-wrap:wrap;
    gap:8px;
    padding:10px 12px;
  }

  .action-buttons .btn-small{
    flex:1;
    min-width:calc(50% - 4px);
  }
}

/* Action Buttons Container (legacy) */
.action-cell{
  display:flex;
  gap:8px;
  margin-top:8px;
  padding-top:12px;
  border-top:1px solid var(--border-color);
}
.action-cell .btn-small{flex:1;}

/* Status Badge */
.status-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:6px;
  font-weight:500;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.status-badge.status-open{
  background:rgba(210, 153, 34, 0.15);
  color:var(--warning);
  border:1px solid rgba(210, 153, 34, 0.3);
}
.status-badge.status-done{
  background:rgba(63, 185, 80, 0.15);
  color:var(--success);
  border:1px solid rgba(63, 185, 80, 0.3);
}

/* Other badges */
.badge{
  display:inline-block;
  background:var(--bg-tertiary);
  color:var(--text-secondary);
  padding:4px 10px;
  border-radius:6px;
  font-size:13px;
  border:1px solid var(--border-color);
}

/* Flash messages */
.flash{
  padding:12px 16px;
  background:rgba(210, 153, 34, 0.15);
  border:1px solid rgba(210, 153, 34, 0.3);
  border-radius:8px;
  margin-bottom:16px;
  color:var(--warning);
}

/* Inline editing */
.inline-edit{
  width:100% !important;
  font-family:inherit;
  font-size:inherit;
  border:1px solid var(--accent-primary) !important;
  border-radius:6px !important;
  background:var(--bg-tertiary) !important;
  color:var(--text-primary) !important;
  padding:8px 12px !important;
}
.inline-edit:focus{
  outline:none;
  border-color:var(--accent-hover) !important;
  box-shadow:0 0 0 3px rgba(88, 166, 255, 0.2);
}

/* Textarea in inline edit mode */
textarea.inline-edit{
  resize:vertical;
  overflow-y:auto;
  min-height:80px;
  max-height:400px;
  line-height:1.6;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .container{padding:12px;}
  h1{font-size:24px;}
  h2{font-size:20px !important;}
  .list-info-title{font-size:20px !important;}
  .new-entry-header h2{font-size:20px !important;}

  /* Header adjustments */
  header{padding:12px 16px;}
  nav{gap:12px;flex-direction:row;align-items:center;justify-content:space-between;}
  .nav-left{
    justify-content:flex-start;
    gap:8px;
  }
  .nav-right{
    justify-content:flex-end;
    gap:12px;
  }
  nav a{
    padding:8px 12px;
    font-size:14px;
    text-align:center;
  }
  /* User badge mobile */
  .user-badge{
    justify-content:center;
    padding:8px 14px;
  }

  /* Logout button mobile */
  .btn-logout{
    padding:8px 16px;
    font-size:13px;
    width:auto;
  }

  /* Single column layout for cards */
  #items tbody{
    grid-template-columns:1fr;
  }

  /* Larger touch targets */
  .btn-small{
    padding:10px 14px;
    font-size:14px;
  }

  /* Form optimizations */
  form{padding:20px;}
  form input, form textarea, form select{
    font-size:16px; /* Prevents iOS zoom */
    padding:12px;
  }

  /* Inline edit textarea mobile optimization */
  textarea.inline-edit{
    font-size:16px; /* Prevents iOS zoom */
    min-height:120px;
    max-height:300px;
  }

  /* Tabs mobile optimization */
  .tab-button{
    padding:10px 16px;
    font-size:14px;
    flex:1;
    text-align:center;
  }
  .tab-count{
    display:block;
    margin:4px auto 0;
  }

  /* Lists grid mobile */
  .lists-grid{
    grid-template-columns:1fr;
  }

  .list-card-header h3{
    font-size:18px;
  }

  .list-card-stats{
    gap:8px;
  }

  .stat-number{
    font-size:20px;
  }

  .invite-popover{
    width:90vw;
    max-height:70vh;
  }

  .invite-list{
    max-height:40vh;
  }
}

/* Invitation Popover */
.invite-popover-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  opacity:0;
  animation:fadeIn 0.2s forwards;
}

@keyframes fadeIn{
  to{opacity:1;}
}

.invite-popover{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:12px;
  width:500px;
  max-width:90vw;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  animation:slideUp 0.3s ease-out;
}

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

.invite-popover-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border-color);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.invite-search-container{
  padding:12px 20px;
  border-bottom:1px solid var(--border-color);
  background:var(--bg-secondary);
}

.invite-search-input{
  width:100%;
  padding:10px 14px;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:8px;
  color:var(--text-primary);
  font-size:16px;
  transition:all 0.2s;
  outline:none;
  box-sizing:border-box;
}

.invite-search-input:focus{
  border-color:var(--accent-primary);
  box-shadow:0 0 0 1px rgba(88,166,255,0.3) inset;
}

.invite-search-input::placeholder{
  color:var(--text-secondary);
}

.invite-no-results{
  text-align:center;
  padding:20px;
  color:var(--text-secondary);
  font-size:14px;
}

.invite-popover-header h3{
  margin:0;
  font-size:18px;
}

.invite-close{
  background:none;
  border:none;
  color:var(--text-secondary);
  font-size:24px;
  cursor:pointer;
  padding:0;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  transition:background 0.2s;
}

.invite-close:hover{
  background:var(--bg-tertiary);
  color:var(--text-primary);
}

.invite-popover-body{
  padding:20px;
  overflow-y:auto;
  flex:1;
}

.invite-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px;
  max-height:300px;
  overflow-y:auto;
  padding-right:8px;
}

.invite-section-header{
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:8px 4px 4px 4px;
  margin-top:4px;
}

.invite-divider{
  height:1px;
  background:var(--border-color);
  margin:12px 0;
}

.invite-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:8px;
  cursor:pointer;
  transition:all 0.2s;
}

.invite-item:hover{
  background:var(--bg-secondary);
  border-color:var(--accent-primary);
}

.invite-item.selected{
  background:var(--bg-secondary);
  border-color:var(--accent-primary);
  box-shadow:0 0 0 2px rgba(88,166,255,0.2);
}

.invite-checkbox{
  width:20px;
  height:20px;
  border:2px solid var(--border-color);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-card);
  transition:all 0.2s;
}

.invite-item.selected .invite-checkbox{
  background:var(--accent-primary);
  border-color:var(--accent-primary);
}

.invite-checkbox::after{
  content:'✓';
  color:white;
  font-size:14px;
  font-weight:bold;
  opacity:0;
  transition:opacity 0.2s;
}

.invite-item.selected .invite-checkbox::after{
  opacity:1;
}

.invite-user-info{
  flex:1;
}

.invite-user-name{
  font-weight:600;
  color:var(--text-primary);
}

.invite-user-email{
  font-size:13px;
  color:var(--text-secondary);
}

.invite-popover-footer{
  padding:16px 20px;
  border-top:1px solid var(--border-color);
  display:flex;
  gap:12px;
  justify-content:flex-end;
}

.invite-empty{
  text-align:center;
  padding:40px 20px;
  color:var(--text-secondary);
}

.invite-success{
  background:rgba(63,185,80,0.1);
  border:1px solid var(--success);
  color:var(--success);
  padding:12px;
  border-radius:6px;
  text-align:center;
  margin-bottom:16px;
}

/* Participants Display */
.participants-container{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.participants-label{
  font-size:13px;
  color:var(--text-secondary);
  font-weight:500;
}

.participants-list{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.participant-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  background:rgba(88,166,255,0.1);
  border:1px solid rgba(88,166,255,0.3);
  border-radius:12px;
  font-size:13px;
  color:var(--accent-primary);
  transition:all 0.2s;
}

.participant-badge:hover{
  background:rgba(88,166,255,0.15);
  border-color:rgba(88,166,255,0.5);
}

.participant-badge.is-creator{
  background:rgba(63,185,80,0.1);
  border-color:rgba(63,185,80,0.3);
  color:var(--success);
  font-weight:500;
}

.participant-badge.is-creator:hover{
  background:rgba(63,185,80,0.15);
  border-color:rgba(63,185,80,0.5);
}

.participant-badge .icon{
  font-size:11px;
}

/* Pending Invitations Display */
.pending-invitations-section{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border-color);
}

.pending-invitations-list{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.pending-invitation-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  padding-right:6px;
  background:rgba(210,153,34,0.1);
  border:1px solid rgba(210,153,34,0.3);
  border-radius:12px;
  font-size:13px;
  color:var(--warning);
  transition:all 0.2s;
  position:relative;
}

.pending-invitation-badge:hover{
  background:rgba(210,153,34,0.15);
  border-color:rgba(210,153,34,0.5);
}

.pending-invitation-badge .invitation-date{
  font-size:11px;
  opacity:0.7;
  margin-left:2px;
}

.invitation-cancel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-left:6px;
  padding:0;
  background:rgba(248,81,73,0.1);
  border:1px solid rgba(248,81,73,0.3);
  border-radius:50%;
  color:var(--danger);
  font-size:18px;
  font-weight:bold;
  font-family:Arial, sans-serif;
  line-height:1;
  cursor:pointer;
  transition:all 0.2s;
  flex-shrink:0;
  vertical-align:middle;
  /* Perfekte Zentrierung auf allen Geräten */
  position:relative;
  top:-1px;
}

.invitation-cancel-btn:hover{
  background:rgba(248,81,73,0.2);
  border-color:var(--danger);
  transform:scale(1.1);
}

.invitation-cancel-btn:active{
  transform:scale(0.95);
}

/* Mobile Quick Toggle (Tap & Hold Button) */
.mobile-quick-toggle{
  display:none;
}

@media (max-width: 767px) {
  .mobile-quick-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:52px;
    margin-top:12px;
    padding:0;
    background:var(--bg-tertiary);
    border:2px solid var(--border-color);
    border-radius:12px;
    color:var(--text-primary);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:border-color 0.2s, box-shadow 0.2s;
    position:relative;
    overflow:hidden;
    touch-action:manipulation;
  }

  .mobile-quick-toggle:active{
    transform:scale(0.98);
  }

  .mobile-quick-toggle[data-status="open"]{
    border-color:rgba(63,185,80,0.5);
    color:var(--success);
  }

  .mobile-quick-toggle[data-status="done"]{
    border-color:rgba(210,153,34,0.5);
    color:var(--warning);
  }

  .mobile-quick-toggle.holding{
    border-width:3px;
  }

  .mobile-quick-toggle[data-status="open"].holding{
    border-color:var(--success);
    box-shadow:0 0 0 2px rgba(63,185,80,0.3);
  }

  .mobile-quick-toggle[data-status="done"].holding{
    border-color:var(--warning);
    box-shadow:0 0 0 2px rgba(210,153,34,0.3);
  }

  /* Progress Fill - DEAKTIVIERT (nur für Struktur) */
  .progress-fill{
    display:none;
  }

  .toggle-content{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:relative;
    z-index:1;
    padding:12px 16px;
  }

  .toggle-icon{
    font-size:20px;
  }

  .toggle-text{
    font-weight:600;
  }
}

/* Invitation Cards */
.invitation-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:all 0.3s;
  border-left:4px solid var(--accent-primary);
  animation:fadeIn 0.15s ease-in-out;
}

.invitation-card:hover{
  border-color:var(--accent-primary);
  box-shadow:0 4px 16px rgba(88,166,255,0.15);
  transform:translateY(-2px);
}

.invitation-card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.invitation-info h4{
  margin:0 0 4px 0;
  font-size:18px;
  color:var(--text-primary);
}

.invitation-meta{
  font-size:13px;
  color:var(--text-secondary);
}

.invitation-from{
  color:var(--accent-primary);
  font-weight:500;
}

.invitation-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
}

.btn-accept{
  background:var(--success);
  border:none;
}

.btn-accept:hover{
  background:#2ea043;
}

.btn-decline{
  background:var(--danger);
  border:none;
  color:white;
}

.btn-decline:hover{
  background:#da3633;
  color:white;
}

/* Assignment Badges */
.assigned-badge{
  display:inline;
  color:var(--text-primary);
  font-size:14px;
  font-weight:normal;
}

.text-muted{
  color:var(--text-secondary);
  font-style:italic;
}

/* Assignment Select in Edit Mode */
.assign-select{
  width:100%;
  padding:8px;
  border:1px solid var(--border-color);
  border-radius:6px;
  background:var(--bg-secondary);
  color:var(--text-primary);
  font-size:14px;
}

.assign-select:focus{
  outline:none;
  border-color:var(--accent-primary);
}


/* Login Page Styling */
.login-container{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 200px);
  padding:20px;
}

.login-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:16px;
  padding:40px;
  width:100%;
  max-width:525px;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  transition:all 0.3s;
}

.login-card:hover{
  border-color:var(--accent-primary);
  box-shadow:0 12px 48px rgba(88,166,255,0.15);
  transform:translateY(-2px);
}

.login-header{
  text-align:center;
  margin-bottom:32px;
}

.login-header h1{
  margin:0 0 8px 0;
  font-size:28px;
  font-weight:700;
  background:linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.login-subtitle{
  margin:0;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:400;
}

.login-form{
  background:transparent;
  border:none;
  padding:0;
}

.login-form .form-group{
  margin-bottom:20px;
}

.login-form .form-group:last-of-type{
  margin-bottom:28px;
}

.login-form label{
  display:block;
  margin-bottom:8px;
  color:var(--text-primary);
  font-size:14px;
  font-weight:600;
}

.login-form input[type=email],
.login-form input[type=password]{
  width:100%;
  padding:12px 16px;
  background:var(--bg-tertiary);
  border:2px solid var(--border-color);
  border-radius:8px;
  color:var(--text-primary);
  font-size:15px;
  transition:all 0.2s;
  box-sizing:border-box;
}

.login-form input[type=email]:focus,
.login-form input[type=password]:focus{
  outline:none;
  border-color:var(--accent-primary);
  background:var(--bg-secondary);
  box-shadow:0 0 0 3px rgba(88,166,255,0.1);
}

.login-form input::placeholder{
  color:var(--text-secondary);
  opacity:0.6;
}

.btn-login{
  width:100%;
  padding:14px 24px;
  font-size:16px;
  font-weight:600;
  background:linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
  border:none;
  border-radius:8px;
  color:#ffffff;
  cursor:pointer;
  transition:all 0.3s;
  box-shadow:0 4px 12px rgba(88,166,255,0.3);
}

.btn-login:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(88,166,255,0.4);
}

.btn-login:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(88,166,255,0.3);
}

/* Mobile Optimierungen für Login */
@media (max-width: 768px) {
  .login-container{
    min-height:calc(100vh - 160px);
    padding:16px;
  }

  .login-card{
    padding:32px 24px;
  }

  .login-header h1{
    font-size:24px;
  }

  .login-form input[type=email],
  .login-form input[type=password]{
    font-size:16px; /* Verhindert iOS Zoom */
    padding:14px;
  }
}

/* Minimal Layout (Login/Auth Pages) */
body.minimal-layout{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:20px;
  position:relative;
}

body.minimal-layout .login-container{
  min-height:auto;
}

.flash-minimal{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  max-width:500px;
  width:calc(100% - 40px);
  z-index:1000;
  animation:slideDown 0.3s ease-out;
}

@keyframes slideDown{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(-20px);
  }
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}

@media (max-width: 768px) {
  body.minimal-layout{
    padding:16px;
  }

  .flash-minimal{
    top:16px;
    width:calc(100% - 32px);
  }
}

/* User Menu Dropdown */
.user-menu{
  position:relative;
}

.user-badge{
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.dropdown-arrow{
  font-size:8px;
  transition:transform 0.2s;
  color:var(--text-secondary);
  margin-left:2px;
}

.user-dropdown.show ~ .user-badge .dropdown-arrow,
.user-badge:hover .dropdown-arrow{
  transform:rotate(180deg);
}

.user-dropdown{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:10px;
  width:100%;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:all 0.2s ease-out;
  z-index:1000;
  overflow:hidden;
}

.user-dropdown.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.dropdown-item{
  display:block;
  padding:12px 16px;
  color:var(--text-primary);
  text-decoration:none !important;
  transition:background 0.2s;
  cursor:pointer;
  border:none;
  background:transparent;
  width:100%;
  text-align:center;
  font-size:14px;
  font-weight:500;
  font-family:inherit;
  box-sizing:border-box;
}

.dropdown-item:hover{
  background:var(--bg-tertiary);
  color:var(--text-primary);
  text-decoration:none !important;
}

.dropdown-item:focus{
  outline:none;
  background:var(--bg-tertiary);
}
}
}

.dropdown-icon{
  font-size:16px;
  width:18px;
  text-align:center;
  opacity:0.8;
}

.dropdown-divider{
  height:1px;
  background:var(--border-color);
  margin:4px 8px;
}
n.dropdown-form{
  margin:0;
  padding:0;
  display:block;
  width:100%;
}

.dropdown-form .dropdown-item{
  justify-content:flex-start;
}

}

.dropdown-logout .dropdown-icon{
  opacity:1;
}

/* Mobile dropdown adjustments */
@media (max-width: 768px) {
  .user-dropdown{
    min-width:180px;
    top:calc(100% + 8px);
  }

  .dropdown-item{
    padding:12px 16px;
    font-size:15px;
  }

  .dropdown-item:hover{
    padding-left:16px;
  }
}


/* Password Change Page */
.password-change-container{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 200px);
  padding:20px;
}

.password-change-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:16px;
  padding:40px;
  width:100%;
  max-width:525px;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}

.password-change-header{
  text-align:center;
  margin-bottom:32px;
}

.password-change-header h1{
  margin:0 0 8px 0;
  font-size:28px;
  font-weight:700;
  color:var(--text-primary);
}

.password-change-subtitle{
  margin:0;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:400;
}

.password-change-form{
  background:transparent;
  border:none;
  padding:0;
}

.password-change-form .form-group{
  margin-bottom:20px;
}

.password-change-form .form-group:last-of-type{
  margin-bottom:28px;
}

.password-change-form label{
  display:block;
  margin-bottom:8px;
  color:var(--text-primary);
  font-size:14px;
  font-weight:600;
}

.password-change-form input[type="password"]{
  width:100%;
  padding:12px 16px;
  background:var(--bg-tertiary);
  border:2px solid var(--border-color);
  border-radius:8px;
  color:var(--text-primary);
  font-size:15px;
  transition:all 0.2s;
  box-sizing:border-box;
}

.password-change-form input[type="password"]:focus{
  outline:none;
  border-color:var(--accent-primary);
  background:var(--bg-secondary);
  box-shadow:0 0 0 3px rgba(88,166,255,0.1);
}

.form-hint{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--text-secondary);
}

.button-group{
  display:flex;
  gap:12px;
}

.button-group .btn{
  flex:1;
}

.btn-primary{
  background:linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
  border:none;
  color:#ffffff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(88,166,255,0.3);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(88,166,255,0.4);
}

.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(88,166,255,0.3);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .password-change-container{
    min-height:calc(100vh - 160px);
    padding:16px;
  }

  .password-change-card{
    padding:32px 24px;
  }

  .password-change-header h1{
    font-size:24px;
  }

  .password-change-form input[type="password"]{
    font-size:16px;
    padding:14px;
  }

  .button-group{
    flex-direction:column;
  }
}

/* List info title (single line) */
.list-info-title{
  font-size:24px;
  font-weight:600;
  color:var(--text-primary);
  flex:1;
  display:flex;
  align-items:center;
  min-height:32px;
}

/* Match height of new entry card when collapsed */
.list-info.collapsed .list-info-header,
.new-entry-card.collapsed .new-entry-header{
  min-height:48px;
  align-items:center;
}

/* ========================================
   SMART RESPONSIVE ADMIN TABLES
   Option 2 (Smart Hide) + Option 1 (Horizontal Scroll)
   ======================================== */

/* Admin Section Header */
.admin-section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:12px;
}

.admin-section-header h2{
  margin:0;
}

/* Admin Form */
.admin-form{
  max-width:600px;
}

.form-actions{
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Responsive Table Wrapper with Scroll Indicator */
.responsive-table-wrapper{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
}

/* Scroll Shadow Indicators */
.responsive-table-wrapper::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:30px;
  background:linear-gradient(to left, rgba(13,17,23,0.8), transparent);
  pointer-events:none;
  opacity:0;
  transition:opacity 0.3s;
}

.responsive-table-wrapper.has-scroll::after{
  opacity:1;
}

/* Admin Table Base Styles */
.admin-table{
  width:100%;
  min-width:600px; /* Prevent table from becoming too narrow */
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  /* Hide less important columns on mobile */
  .hide-mobile{
    display:none !important;
  }

  /* Reduce table min-width for mobile */
  .admin-table{
    min-width:100%;
  }

  /* Optimize table cell padding for mobile */
  table thead th{
    padding:12px 8px;
    font-size:12px;
  }

  table tbody td{
    padding:12px 8px;
    font-size:14px;
  }

  /* Make buttons stack on very narrow screens */
  table tbody td[style*="white-space:nowrap"] form{
    display:block;
    margin-top:4px;
  }

  /* Compact badges on mobile */
  .badge{
    font-size:11px;
    padding:3px 8px;
  }

  /* Admin section header - stack on mobile */
  .admin-section-header{
    flex-direction:column;
    align-items:stretch;
  }

  .admin-section-header .btn{
    width:100%;
    text-align:center;
  }

  /* Form actions stack on mobile */
  .form-actions{
    flex-direction:column;
  }

  .form-actions .btn{
    width:100%;
  }

  /* Reduce participant badge size */
  .participant-badge{
    font-size:10px !important;
    padding:2px 6px !important;
  }
}

/* Very small screens - enable horizontal scroll with better UX */
@media (max-width: 480px) {
  /* Further reduce padding */
  table thead th,
  table tbody td{
    padding:10px 6px;
    font-size:13px;
  }

  /* Make action buttons smaller */
  .btn-small{
    padding:6px 10px;
    font-size:12px;
  }

  /* Compact table wrapper */
  .responsive-table-wrapper{
    margin-left:-12px;
    margin-right:-12px;
    padding:0 12px;
    border-radius:0;
  }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
  /* On tablets, show all columns but with horizontal scroll if needed */
  .admin-table{
    min-width:800px;
  }

  .responsive-table-wrapper{
    margin-left:-12px;
    margin-right:-12px;
    padding:0 12px;
  }
}

/* JavaScript-free scroll indicator (alternative approach) */
@media (max-width: 768px) {
  .responsive-table-wrapper{
    background:
      linear-gradient(to right, var(--bg-primary) 30%, transparent),
      linear-gradient(to left, var(--bg-primary) 30%, transparent);
    background-repeat:no-repeat;
    background-size:20px 100%, 20px 100%;
    background-position:left center, right center;
    background-attachment:local, local;
  }
}

/* ========================================
   SHARE ACTION BUTTONS
   ======================================== */

/* Share Actions Container */
.share-actions{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
}

/* Share Button Base Style */
.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  min-width:0;
  min-height:0;
  padding:0;
  box-sizing:border-box;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:6px;
  color:var(--text-secondary);
  cursor:pointer;
  transition:all 0.2s ease;
  text-decoration:none;
  flex-shrink:0;
}

.share-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

.share-btn svg{
  width:14px;
  height:14px;
  stroke-width:2;
}

/* Open Button - Blue */
.share-btn-open:hover{
  background:rgba(88,166,255,0.15);
  border-color:var(--accent-primary);
  color:var(--accent-primary);
}

/* Copy Button - Green */
.share-btn-copy:hover{
  background:rgba(63,185,80,0.15);
  border-color:var(--success);
  color:var(--success);
}

.share-btn-copy.copied{
  background:rgba(63,185,80,0.15);
  border-color:var(--success);
  color:var(--success);
}

/* Email Button - Orange */
.share-btn-email:hover{
  background:rgba(210,153,34,0.15);
  border-color:var(--warning);
  color:var(--warning);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  /* Larger touch targets on mobile */
  .share-btn{
    width:40px;
    height:40px;
  }

  .share-btn svg{
    width:16px;
    height:16px;
  }

  .share-actions{
    gap:8px;
    justify-content:center;
  }

  /* Stack share actions on very small screens if needed */
  @media (max-width: 360px) {
    .share-actions{
      flex-wrap:wrap;
    }
  }
}

/* Tooltip enhancement - optional, subtle */
.share-btn[title]:hover::after{
  content:attr(title);
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  padding:4px 8px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:4px;
  font-size:11px;
  white-space:nowrap;
  color:var(--text-primary);
  pointer-events:none;
  z-index:10;
  opacity:0;
  animation:fadeInTooltip 0.2s ease forwards;
}

@keyframes fadeInTooltip{
  to{
    opacity:1;
    transform:translateX(-50%) translateY(-8px);
  }
}

/* Desktop hover states - more subtle */
@media (min-width: 769px) {
  .share-btn{
    width:28px;
    height:28px;
  }

  .share-btn svg{
    width:13px;
    height:13px;
  }

  .share-actions{
    gap:4px;
  }
}

/* ========================================
   MOBILE NAVIGATION WITH BURGER MENU
   ======================================== */

/* Desktop: Hide nav links (we use burger menu now) */
.nav-links{
  display:none;
}

/* Desktop: Show header-left and header-right */
.header-left{
  display:flex;
  align-items:center;
}

.header-right{
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
}

/* Icon buttons - transparent background, no background on hover */
.icon-btn{
  background:transparent !important;
  border:none;
  color:var(--text-primary);
  cursor:pointer;
  padding:6px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 0.2s;
  width:36px;
  height:36px;
}

.icon-btn:hover{
  color:var(--accent-primary);
}

.icon-btn svg{
  display:block;
}

.search-btn{
  background:none !important;
}

/* Burger button - show on all screens */
.burger-btn{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  background:transparent;
  border:none;
  color:var(--text-primary);
  cursor:pointer;
  padding:6px;
  border-radius:6px;
  transition:background 0.2s, color 0.2s;
  width:36px;
  height:36px;
}

.burger-btn:hover{
  background:var(--bg-tertiary);
}

.burger-line{
  width:20px;
  height:2px;
  background:var(--text-primary);
  border-radius:2px;
  transition:all 0.3s ease;
}

.burger-btn:hover .burger-line{
  background:var(--accent-primary);
}

/* Nav dropdown - hidden by default, shown via JS */
.nav-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:8px;
  min-width:200px;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  z-index:1000;
}

.nav-dropdown.show{
  display:block;
}

/* Nav menu items - vertical list */
.nav-menu-item{
  display:block;
  padding:14px 18px;
  color:var(--text-primary);
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  transition:background 0.2s;
}

.nav-menu-item:hover,
.nav-menu-item:active{
  background:var(--bg-tertiary);
}

/* Mobile Styles */
@media (max-width: 768px) {
  /* Reduce header padding on mobile */
  header{
    padding:8px 12px;
  }

  nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }

  /* Hide desktop nav links on mobile */
  .nav-links{
    display:none !important;
  }

  /* Header Left: User Badge */
  .header-left{
    display:flex;
    align-items:center;
  }

  /* Header Right: Search + Burger */
  .header-right{
    display:flex;
    align-items:center;
    gap:4px;
    position:relative;
  }

  /* Icon buttons (Search and Burger) */
  .icon-btn{
    background:transparent !important;
    border:none;
    color:var(--text-primary);
    cursor:pointer;
    padding:6px;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:color 0.2s;
    width:36px;
    height:36px;
  }

  .icon-btn:hover{
    color:var(--accent-primary);
  }

  .icon-btn svg{
    display:block;
  }

  /* Search button - no background ever */
  .search-btn{
    background:none !important;
  }

  /* Burger button specific styles */
  .burger-btn{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
  }

  .burger-line{
    width:20px;
    height:2px;
    background:var(--text-primary);
    border-radius:2px;
    transition:all 0.3s ease;
  }

  .burger-btn:hover .burger-line{
    background:var(--accent-primary);
  }

  .nav-dropdown{
    display:block;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:210px;
    background:var(--bg-card);
    border:1px solid var(--border-color);
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:all 0.2s ease-out;
    z-index:9999;
    overflow:hidden;
  }

  .nav-dropdown.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    background:var(--bg-card);
  }

  .nav-menu-item{
    display:block;
    padding:14px 18px;
    color:var(--text-primary);
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    transition:background 0.2s;
  }

  .nav-menu-item:hover,
  .nav-menu-item:active{
    background:var(--bg-tertiary);
  }
}

/* Very small screens */
@media (max-width: 480px) {
  header{
    padding:8px 12px;
  }

  .burger-menu{
    width:28px;
    height:22px;
  }

  .burger-line{
    height:2.5px;
  }

  .user-badge{
    padding:6px 10px;
  }

  .user-badge .user-name{
    font-size:13px;
  }
}

/* Search Overlay */
.search-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background:var(--bg-primary);
  z-index:10001;
  display:none;
  flex-direction:column;
  opacity:0;
  transform:translateY(-20px);
  transition:opacity 0.2s ease-out, transform 0.2s ease-out;
}
.search-overlay.show{
  display:flex;
  opacity:1;
  transform:translateY(0);
}

.search-overlay-header{
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border-color);
  padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top, 0px));
  display:flex;
  align-items:center;
  gap:12px;
  position:sticky;
  top:0;
  z-index:10;
}

.search-close-btn{
  background:transparent;
  border:none;
  color:var(--text-primary);
  cursor:pointer;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  transition:background 0.2s, color 0.2s;
  flex-shrink:0;
}
.search-close-btn:hover{
  background:var(--bg-tertiary);
  color:var(--accent-primary);
}

.search-input{
  flex:1;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:8px;
  padding:10px 16px;
  color:var(--text-primary);
  font-size:16px;
  outline:none;
  transition:border-color 0.2s;
}
.search-input:focus{
  border-color:var(--accent-primary);
}
.search-input::placeholder{
  color:var(--text-secondary);
}

.search-clear-btn{
  background:var(--bg-tertiary);
  border:none;
  color:var(--text-secondary);
  cursor:pointer;
  padding:8px 12px;
  border-radius:6px;
  font-size:18px;
  transition:background 0.2s, color 0.2s;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.search-clear-btn:hover{
  background:var(--bg-card);
  color:var(--text-primary);
}

/* Desktop: Limit search overlay width */
@media (min-width: 769px) {
  .search-overlay{
    width:600px;
    left:50%;
    transform:translateX(-50%) translateY(-20px);
    border-radius:12px;
    margin-top:80px;
    height:auto;
    max-height:80vh;
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
  }
  .search-overlay.show{
    transform:translateX(-50%) translateY(0);
  }
  .search-overlay-header{
    border-radius:12px 12px 0 0;
  }
}

.search-results{
  flex:1;
  overflow-y:auto;
  padding:20px 16px;
}

.search-empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--text-secondary);
}
.search-empty-state svg{
  margin:0 auto 16px;
  opacity:0.5;
}
.search-empty-state p{
  font-size:16px;
  margin:8px 0;
}

.search-results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
  gap:20px;
}

/* Mobile adjustments for search */
@media(max-width:768px){
  .search-results-grid{
    grid-template-columns:1fr;
  }
}

/* ==================== Item Card Layout ==================== */
.item-card-cell{
  padding:0 !important;
  margin:0 !important;
}

.item-card{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Thumbnail at Left (fixed width) */
.item-card-thumbnail{
  width:100%;
  min-width:100%;
  height:auto;
  padding:0;
  margin:0;
  flex-shrink:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.thumbnail-placeholder{
  width:100%;
  height:140px;
  background:var(--bg-secondary);
  border:none;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-secondary);
}

/* Content Area - fills remaining space, aligned with thumbnail right edge */
.item-card-content{
  display:flex;
  flex-direction:column;
  padding:16px 16px 16px 0;
  gap:0;
  flex:1;
}

.item-card-main{
  width:100%;
}

/* Topic and Comment styling in new layout */
.field-value-topic{
  font-size:14px;
  font-weight:normal;
  color:var(--text-primary);
  line-height:1.6;
}

.field-value-comment{
  font-size:14px;
  color:var(--text-primary);
  line-height:1.6;
  white-space:pre-wrap;
  max-height:none;
  overflow-y:visible;
}

/* Meta Info Row - centered text */
.item-card-meta{
  display:flex;
  gap:24px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border-color);
  flex-wrap:wrap;
}

.item-card-meta .item-field{
  margin-bottom:0;
  flex:1;
  min-width:150px;
  text-align:center;
}

.item-card-meta .field-label{
  text-align:center;
  display:block;
}

.item-card-meta .field-value{
  text-align:center;
  display:block;
}

/* Action Buttons Row */
.item-card-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  padding-bottom:14px;
  border-top:1px solid var(--border-color);
}

.action-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}

.action-buttons .btn-small{
  flex:1;
  min-width:calc(50% - 4px);
}

/* Hold to Complete Button Area */
.item-card-toggle{
  padding:0;
  margin:0;
  margin-top:6px;
}

/* Mobile adjustments for card layout */
@media (max-width: 768px) {
  .item-card{
    flex-direction:column;
  }

  .item-card-thumbnail{
    width:100%;
    min-width:100%;
  }

  .item-card-meta{
    flex-direction:row;
    gap:12px;
  }

  .item-card-meta .item-field{
    min-width:0;
    flex:1 1 45%;
  }

  .item-card-actions{
    flex-wrap:wrap;
    gap:8px;
    padding:10px 12px;
  }

  .action-buttons .btn-small{
    flex:1;
    min-width:calc(50% - 4px);
  }
}

/* ==================== Fixed Input Bar (Bottom) ==================== */
.fixed-input-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--bg-primary);
  border-top:1px solid var(--border-color);
  padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left:calc(16px + env(safe-area-inset-left, 0px));
  padding-right:calc(16px + env(safe-area-inset-right, 0px));
  z-index:1000;
  box-shadow:0 -2px 10px rgba(0,0,0,0.1);
}

.quick-create-form{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:1200px;
  margin:0 auto;
}

.quick-btn{
  width:40px;
  height:40px;
  min-width:40px;
  border:1px solid var(--border-color);
  background:var(--bg-primary);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--text-secondary);
  transition:all 0.2s;
  padding:0;
}

.quick-btn:hover{
  background:var(--bg-secondary);
  color:var(--text-primary);
  border-color:var(--accent-primary);
}

.quick-btn.active{
  background:var(--accent-primary);
  color:white;
  border-color:var(--accent-primary);
}

.quick-input{
  flex:1;
  height:40px;
  border:1px solid var(--border-color);
  background:var(--bg-primary);
  border-radius:6px;
  padding:0 12px;
  font-size:14px;
  color:var(--text-primary);
  font-family:inherit;
}

.quick-input:focus{
  outline:none;
  border-color:var(--accent-primary);
  box-shadow:0 0 0 3px rgba(88, 166, 255, 0.1);
}

.quick-input::placeholder{
  color:var(--text-secondary);
}

.quick-create-btn{
  height:40px;
  padding:0 20px;
  white-space:nowrap;
  min-width:auto;
}

/* Add bottom padding to body to prevent content from being hidden behind fixed bar */
body{
  padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px));
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .fixed-input-bar{
    padding:10px 12px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    padding-left:calc(12px + env(safe-area-inset-left, 0px));
    padding-right:calc(12px + env(safe-area-inset-right, 0px));
  }
  
  .quick-create-form{
    gap:6px;
  }
  
  .quick-btn{
    width:44px;
    height:44px;
    min-width:44px;
  }

  .quick-input{
    height:44px;
    font-size:14px;
  }

  .quick-create-btn{
    height:44px;
    padding:0 16px;
    font-size:14px;
  }
}

/* Auto-rotate images based on EXIF orientation (modern browsers) */
.item-thumbnail-img,
#lightboxImage {
  image-orientation: from-image;
}

/* Notification Bell */
.notification-bell {
  position: relative;
  margin-right: 16px;
}

.notification-bell .icon-btn {
  position: relative;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.notification-bell .icon-btn:hover {
  color: var(--accent-primary);
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.notification-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: 90vw;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 10001;
  max-height: 500px;
  overflow: hidden;
}

.notification-dropdown.show {
  display: flex;
  flex-direction: column;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.notification-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent-primary);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.btn-link:hover {
  background: var(--bg-tertiary);
}

.notification-list {
  overflow-y: auto;
  max-height: 350px;
  flex: 1;
}

.notification-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.notification-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.2s;
}

.notification-item:hover {
  background: var(--bg-tertiary);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.unread {
  background: rgba(88, 166, 255, 0.05);
  border-left: 3px solid var(--accent-primary);
}

.notification-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.notification-message {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.notification-time {
  font-size: 11px;
  color: var(--text-secondary);
}

.notification-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
}

.notification-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.notification-toggle input[type=checkbox] {
  cursor: pointer;
}

/* Mobile anpassung */
@media (max-width: 768px) {
  .notification-dropdown {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}