/**
 * 💛 MOBILE OPTIMIZATION - RESPONSIVE & LIGHT DESIGN
 * ===================================================
 * 
 * Autor: Leon (für Daniel & James) · 2025-11-03
 * Purpose: Helles, responsives Design für alle Seiten (wie Kalender)
 */

/* ============================================================================
   BASE MOBILE STYLES
   ============================================================================ */

@media (max-width: 768px) {
  
  /* 💛 DANIEL FIX: Hide-Mobile Utility Class */
  .hide-mobile {
    display: none !important;
  }
  
  /* 💛 DANIEL FIX: NUR für App-Seiten (Dashboard, Call-Room, Tasks, etc.)
     NICHT für Content-Seiten (Legal, FAQ, Support, About, Donate)
     NICHT für Startseite */
  
  /* Body - Heller Hintergrund (nur für App-Seiten!) */
  body.page-dashboard,
  body.page-call-room,
  body.page-tasks,
  body.page-notes,
  body.page-calendar,
  body.page-contacts,
  body.page-app {
    background: #f8f9fa !important;
    font-size: 14px;
  }
  
  /* Cards - Helles Design (nur für App-Seiten!) */
  body.page-dashboard .card,
  body.page-call-room .card,
  body.page-tasks .card,
  body.page-notes .card,
  body.page-calendar .card,
  body.page-contacts .card,
  body.page-app .card,
  body.page-dashboard .light-card,
  body.page-call-room .light-card,
  body.page-tasks .light-card,
  body.page-notes .light-card,
  body.page-calendar .light-card,
  body.page-contacts .light-card,
  body.page-app .light-card,
  body.page-dashboard .panel,
  body.page-call-room .panel,
  body.page-tasks .panel,
  body.page-notes .panel,
  body.page-calendar .panel,
  body.page-contacts .panel,
  body.page-app .panel {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    margin-bottom: 12px;
  }
  
  /* Header - Hell (nur für App-Seiten!) */
  body.page-dashboard header.topbar,
  body.page-call-room header.topbar,
  body.page-tasks header.topbar,
  body.page-notes header.topbar,
  body.page-calendar header.topbar,
  body.page-contacts header.topbar,
  body.page-app header.topbar,
  body.page-dashboard .dashboard-header,
  body.page-call-room .dashboard-header,
  body.page-tasks .dashboard-header,
  body.page-notes .dashboard-header,
  body.page-calendar .dashboard-header,
  body.page-contacts .dashboard-header,
  body.page-app .dashboard-header {
    background: white !important;
    border-bottom: 1px solid #e0e0e0 !important;
  }
  
  /* 💛 DANIEL: Startseite Header - NUR Padding anpassen (wie main.css) */
  .page-home header.topbar {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  
  /* 💛 DANIEL FIX: "· KI mit Herz" verstecken auf Mobile (Platz sparen) */
  .page-home header.topbar .brand a small {
    display: none !important;
  }
  
  /* 💛 DANIEL FIX: Icons in Kästchen zentriert (9 Punkte & Person) - ALLE Seiten auf Mobile */
  header.topbar .btn-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  header.topbar .btn-icon svg {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
  }
  
  /* 💛 BUGSEARCHER: Global Helper Avatar auf Mobile */
  header.topbar #globalHelperAvatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid #006D8F !important;
    cursor: pointer !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    display: block !important;
    /* Touch-Bereich vergrößern für bessere Usability */
    padding: 2px;
    box-sizing: border-box;
  }
  
  /* 💛 BUGSEARCHER: Avatar Pulsieren auch auf Mobile */
  header.topbar #globalHelperAvatar.voice-active {
    border-color: #00AEEF !important;
    animation: pulse-blue-mobile 1.5s infinite !important;
  }
  
  @keyframes pulse-blue-mobile {
    0%, 100% { 
      box-shadow: 0 0 0 0 rgba(0, 174, 239, 0.7);
      border-color: #00AEEF;
    }
    50% {
      box-shadow: 0 0 0 8px rgba(0, 174, 239, 0.3);
      border-color: #00AEEF;
    }
    70% { 
      box-shadow: 0 0 0 12px rgba(0, 174, 239, 0);
      border-color: #00AEEF;
    }
  }
  
  /* 💛 BUGSEARCHER: head-actions auf Mobile - sicherstellen dass Avatar sichtbar ist */
  header.topbar .head-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  
  /* Hero auf Startseite - dunkel (wie Desktop) */
  .page-home .hero {
    background: radial-gradient(80% 120% at 80% 20%, rgba(0,207,255,.15), transparent 60%),
                linear-gradient(180deg, rgba(0,109,143,.06), #0e3650 65%, #0e3650 100%) !important;
  }
  
  /* ============================================================================
     CALL ROOM - RESPONSIVE DIAL PAD
     ============================================================================ */
  
  .dialpad-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
  
  .dial-btn {
    font-size: 24px !important;
    padding: 20px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 !important;
  }
  
  .phone-display {
    font-size: 28px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
  }
  
  /* Call Buttons */
  .btn-call,
  .btn-hangup {
    font-size: 18px !important;
    padding: 16px 32px !important;
    border-radius: 50px !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 16px auto !important;
  }
  
  /* ============================================================================
     NOTIZEN & AUFGABEN - RESPONSIVE LISTS
     ============================================================================ */
  
  .note-item,
  .task-item,
  .contact-item {
    padding: 12px !important;
    font-size: 14px !important;
  }
  
  .note-title,
  .task-title,
  .contact-name {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  
  .note-preview,
  .task-notes {
    font-size: 13px !important;
    color: #666 !important;
  }
  
  /* Kanban (Tasks) */
  .kanban-board {
    flex-direction: column !important;
  }
  
  .kanban-column {
    min-width: 100% !important;
    margin-bottom: 20px !important;
  }
  
  /* ============================================================================
     CHAT - TRANSPARENT BUBBLES
     ============================================================================ */
  
  .chat-bubble {
    max-width: 85% !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
  
  .user-bubble {
    background: rgba(0, 109, 143, 0.9) !important;
  }
  
  .james-bubble {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #e0e0e0 !important;
  }
  
  #chatLog {
    background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 100%) !important;
  }
  
  /* Chat Input */
  .chatv2-composer,
  #inputBar {
    padding: 10px !important;
    gap: 8px !important;
  }
  
  .chatv2-input,
  #chatInput {
    font-size: 15px !important;
    padding: 12px !important;
  }
  
  /* ============================================================================
     DASHBOARD - RESPONSIVE GRID
     ============================================================================ */
  
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .action-btn {
    padding: 16px !important;
    font-size: 14px !important;
  }
  
  .action-icon {
    font-size: 28px !important;
  }
  
  /* Helper Avatar */
  .helper-avatar {
    width: 100px !important;
    height: 100px !important;
  }
  
  .helper-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .helper-action-btn {
    width: 100% !important;
    max-width: 200px !important;
  }
  
  /* ============================================================================
     KONTAKTE - RESPONSIVE CARDS
     ============================================================================ */
  
  .contacts-grid {
    grid-template-columns: 1fr !important;
  }
  
  .contact-card {
    padding: 14px !important;
  }
  
  .contact-avatar {
    width: 50px !important;
    height: 50px !important;
  }
  
  /* ============================================================================
     KALENDER - RESPONSIVE EVENTS
     ============================================================================ */
  
  .calendar-grid {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
  }
  
  .calendar-day {
    padding: 8px 4px !important;
    font-size: 13px !important;
  }
  
  .event-item {
    padding: 10px !important;
    font-size: 13px !important;
  }
  
  /* ============================================================================
     FORMS - RESPONSIVE INPUTS
     ============================================================================ */
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px !important; /* Verhindert Zoom auf iOS */
    padding: 12px !important;
  }
  
  /* Buttons */
  .btn,
  button {
    font-size: 15px !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
  }
  
  .btn-primary {
    min-height: 48px !important; /* Touch-friendly */
  }
  
  /* ============================================================================
     MODALS - FULL-SCREEN ON MOBILE
     ============================================================================ */
  
  .modal,
  .wb-modal {
    padding: 0 !important;
  }
  
  .modal-content,
  .wb-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  .modal-header,
  .wb-modal-header {
    padding: 16px !important;
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    z-index: 10 !important;
  }
  
  .modal-body,
  .wb-modal-body {
    padding: 16px !important;
    overflow-y: auto !important;
  }
  
  /* ============================================================================
     NAVIGATION - BOTTOM TAB BAR
     ============================================================================ */
  
  .tab-btn,
  .chatv2-tab {
    font-size: 13px !important;
    padding: 10px 8px !important;
  }
  
  .tab-icon {
    font-size: 20px !important;
  }
  
  /* ============================================================================
     WHITEBOARD - MOBILE TOOLBAR
     ============================================================================ */
  
  .wb-toolbar {
    flex-wrap: wrap !important;
    padding: 6px 8px !important;
  }
  
  .wb-tool-btn,
  .wb-action-btn {
    padding: 8px !important;
    font-size: 14px !important;
  }
  
  .wb-pages-sidebar {
    width: 120px !important;
  }
  
  .wb-page-thumb {
    aspect-ratio: 4/3 !important;
  }
  
  /* ============================================================================
     TABLES - RESPONSIVE STACKING
     ============================================================================ */
  
  table {
    font-size: 13px !important;
  }
  
  th, td {
    padding: 10px 8px !important;
  }
  
  /* ============================================================================
     UTILITY CLASSES
     ============================================================================ */
  
  .hide-mobile {
    display: none !important;
  }
  
  .show-mobile {
    display: block !important;
  }
  
  /* ============================================================================
     SPACING - TIGHTER ON MOBILE
     ============================================================================ */
  
  .container {
    padding: 12px !important;
  }
  
  section {
    padding: 16px 12px !important;
  }
  
  h1 {
    font-size: 24px !important;
  }
  
  h2 {
    font-size: 20px !important;
  }
  
  h3 {
    font-size: 18px !important;
  }
  
  /* ============================================================================
     SIDEBAR - COLLAPSIBLE ON MOBILE
     ============================================================================ */
  
  .chatv2-left,
  .chatv2-right {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
  }
  
  .chatv2-left.open {
    transform: translateX(0) !important;
  }
  
  .chatv2-right {
    transform: translateX(100%) !important;
  }
  
  .chatv2-right.open {
    transform: translateX(0) !important;
  }
  
}

/* ============================================================================
   PORTRAIT TABLET (768px - 1024px)
   ============================================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  
  .quick-actions-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .dialpad-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  
}

/* ============================================================================
   SMALL PHONES (< 375px)
   ============================================================================ */

@media (max-width: 374px) {
  
  .quick-actions-grid {
    grid-template-columns: 1fr !important;
  }
  
  .action-btn {
    font-size: 13px !important;
  }
  
  .chat-bubble {
    max-width: 90% !important;
    font-size: 13px !important;
  }
  
}