/* ============================================================
   MOBILE — Smartphones (≤700px)
   Desktop bleibt unverändert!
   ============================================================ */

/* Bottom Navigation Bar */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom);
}
.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--text3);
  font-size: 10px;
  font-weight: 500;
  position: relative;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mob-nav-item.active { color: var(--accent2); }
.mob-nav-item svg { flex-shrink: 0; }
.mob-badge {
  position: absolute;
  top: 4px; right: calc(50% - 18px);
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 10px;
  min-width: 14px;
  text-align: center;
}

/* Bottom Sheet */
.mob-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  border-radius: 16px 16px 0 0;
  z-index: 4999;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  animation: mob-slide-up 0.25s ease;
}
@keyframes mob-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.mob-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 10px auto 8px;
}
.mob-sheet-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.mob-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
.mob-sheet-item:active { background: var(--surface2); }
.mob-sheet-danger { color: var(--danger); }

@media (max-width: 700px) {

  /* --- BODY & LAYOUT --- */
  body { font-size: 15px; }

  /* Main content: add bottom padding for nav bar */
  .main { padding-bottom: 60px; }
  .content { padding: 12px 14px 12px !important; }

  /* Hide desktop topbar search + proj-chat on mobile */
  #search-btn { display: none !important; }

  /* Topbar kompakter */
  .topbar {
    padding: 0 12px !important;
    height: 52px !important;
  }
  .topbar-title { font-size: 15px !important; }

  /* New task button: icon only on mobile */
  #new-task-btn span { display: none; }
  #new-task-btn {
    width: 36px; height: 36px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50%;
  }

  /* Proj-Chat Button: icon only */
  #proj-chat-btn span:first-of-type { display: none; }

  /* --- SIDEBAR: slide-in via hamburger, unverändert --- */

  /* --- BOTTOM NAV anzeigen --- */
  .mobile-bottom-nav { display: flex !important; }

  /* --- LOGIN BOX --- */
  .login-box {
    width: calc(100vw - 32px) !important;
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }

  /* --- AUFGABENTABELLE → CARD LIST --- */
  .table-wrap { border: none !important; border-radius: 0 !important; overflow: visible !important; }

  table thead { display: none !important; }
  table, tbody, tr, td { display: block !important; width: 100% !important; }

  tr {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 8px !important;
    padding: 10px 14px !important;
    position: relative !important;
  }
  tr:hover { background: var(--surface) !important; }
  tr.done { opacity: 0.5 !important; }

  td {
    padding: 0 !important;
    border: none !important;
    font-size: 13px !important;
  }

  /* Erste Zelle: Checkbox */
  tr td:first-child {
    position: absolute !important;
    top: 12px; left: 14px !important;
    width: auto !important;
  }

  /* Titel-Zelle: einrücken für Checkbox */
  td .task-title {
    padding-left: 28px !important;
    margin-bottom: 6px !important;
  }
  td .task-name { font-size: 14px !important; font-weight: 500 !important; }

  /* Alle anderen Zellen nebeneinander als Tags */
  td:not(:first-child):not(:nth-child(2)) {
    display: inline-flex !important;
    width: auto !important;
    margin-right: 6px !important;
    margin-top: 4px !important;
  }

  /* Priorität, Status, Datum, Assignees als Chips */
  .prio, .status-badge, .date-cell, .proj-tag {
    font-size: 11px !important;
  }
  .av-stack { display: inline-flex !important; }

  /* Aktionen-Zelle: immer sichtbar rechts oben */
  td:last-child {
    position: absolute !important;
    top: 10px; right: 12px !important;
    width: auto !important;
    opacity: 1 !important;
  }

  /* Subtask-Zeilen ausblenden */
  tr[style*="background:var(--surface2)"] {
    display: none !important;
  }

  /* --- FILTER BUTTONS --- */
  .filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  .filters::-webkit-scrollbar { display: none !important; }
  .filter-btn { flex-shrink: 0 !important; }
  .cols-btn { display: none !important; }

  /* --- MYDAY GRID: single column --- */
  .myday-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* --- CHAT: volle Breite, bessere Input-Zone --- */
  .chat-messages { padding: 10px 12px !important; }
  .chat-input-area { padding: 8px 12px !important; }
  .chat-header { padding: 10px 14px !important; font-size: 13px !important; }

  /* Größere Touch-Targets für Nachrichten-Buttons */
  .msg-action-btn { padding: 8px !important; }
  .msg:hover .msg-actions { display: none !important; }  /* keine hover auf touch */
  .msg-actions { display: none !important; }

  /* --- AUFGABEN-DETAIL: vollständig gestapelt --- */
  .task-detail {
    flex-direction: column !important;
    overflow-y: auto !important;
    height: 100% !important;
  }
  .task-detail-top {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .task-detail-left {
    padding: 16px !important;
    overflow: visible !important;
  }
  .task-detail-right {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    min-height: 300px !important;
  }
  .detail-top-resize, .detail-vert-resize { display: none !important; }

  /* Detail Inline-Felder: scroll horizontal */
  [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }

  /* --- ADMIN: gestapelt --- */
  .admin-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }
  .admin-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px !important;
    gap: 4px !important;
    scrollbar-width: none !important;
  }
  .admin-nav::-webkit-scrollbar { display: none !important; }
  .admin-nav-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
  }
  .admin-content { padding: 14px !important; }
  .form-grid { grid-template-columns: 1fr !important; }

  /* --- MODALS: volle Breite, als Bottom-Sheet --- */
  .modal-backdrop { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .field-row { grid-template-columns: 1fr !important; }

  /* --- SETTINGS PANEL --- */
  .settings-panel {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* --- PROJ CARDS in "Alle Chats" --- */
  .proj-card-link { padding: 10px 12px !important; }

  /* --- Subtask in Myday --- */
  .subtask-add-input { font-size: 15px !important; }

  /* --- Touch-Größen --- */
  .btn { min-height: 36px !important; }
  .cb { width: 20px !important; height: 20px !important; }
  input, select, textarea { font-size: 16px !important; } /* verhindert iOS Zoom */

  /* --- Größerer Tap-Bereich für Logout-Button --- */
  #mob-mehr-sheet .mob-sheet-item { min-height: 52px !important; }
}

/* Mobile FAB */
.mob-fab {
  position: fixed;
  bottom: 74px;
  right: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 199;
  box-shadow: 0 4px 20px rgba(91,106,240,0.5);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.15s;
}
.mob-fab:active { transform: scale(0.93); background: var(--accent2); }

@media (max-width: 700px) {
  /* Hide desktop new-task btn, show FAB */
  .hide-mobile { display: none !important; }
  #mob-fab { display: flex !important; }

  /* Topbar: only show title + hamburger + proj-chat */
  #search-btn { display: none !important; }
  .topbar { padding: 0 10px 0 4px !important; height: 52px !important; gap: 6px !important; }
  .topbar-title { font-size: 14px !important; }

  /* Members bar: smaller avatars, wrap */
  #proj-members-bar { flex-wrap: wrap !important; gap: 4px !important; font-size: 11px !important; }

  /* Proj-chat button: icon only */
  #proj-chat-btn .hide-mobile { display: none !important; }
  #proj-chat-btn { padding: 6px 8px !important; }

  /* Project header row: wrap */
  #proj-header-row { gap: 4px !important; }

  /* Content scroll area must not overflow behind FAB */
  .content { padding-bottom: 80px !important; }

  /* Table card view fixes */
  .table-wrap table { border-spacing: 0 !important; }

  /* Each task row as card */
  tbody tr {
    display: block !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    padding: 12px 14px 10px 42px !important;
    position: relative !important;
  }
  tbody td { display: block !important; padding: 0 !important; border: none !important; }

  /* Checkbox position */
  tbody tr > td:first-child {
    position: absolute !important;
    left: 12px !important;
    top: 14px !important;
    width: auto !important;
    padding: 0 !important;
  }

  /* Title row */
  tbody tr > td:nth-child(2) { margin-bottom: 6px !important; }
  .task-title { padding-left: 0 !important; }
  .task-name { font-size: 14px !important; white-space: normal !important; }

  /* Hide less important columns on mobile */
  tbody td[style*="project"], tbody td:empty { display: none !important; }

  /* Bottom row with prio + status + date + assignees */
  tbody tr > td:not(:first-child):not(:nth-child(2)):not(:last-child) {
    display: inline-flex !important;
    margin-right: 6px !important;
    margin-top: 2px !important;
    vertical-align: middle !important;
    width: auto !important;
  }

  /* Actions: always visible top-right */
  tbody tr > td:last-child {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: auto !important;
  }

  /* Subtask rows: hide in table view */
  tr[style*="surface2"] { display: none !important; }

  /* Empty state */
  .empty { padding: 40px 20px !important; font-size: 14px !important; }
}

.msg-content{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:4px;}