/**
 * Tablet-Specific Layouts (768px - 1199px)
 * Optimized for iPad, Android tablets, etc.
 * 
 * PWA is portrait-only, so these styles focus on
 * portrait tablet layouts at various widths.
 */

/* ============================================
   TABLET BASE STYLES
   ============================================ */

/* Tablet base - applied via body class from layout-state.js */
body.is-tablet {
  /* Larger touch targets on tablets */
  --touch-target-min: 48px;
}

body.is-tablet .btn,
body.is-tablet button:not(.btn-sm):not(.btn-xs):not(#presenceBtn):not(.call-contact-btn):not(.contact-chat-btn):not(.contact-profile-btn):not(.teams-profile-btn):not(.teams-call-btn):not(.blind-transfer-btn):not(.attended-transfer-btn):not(.voicemail-transfer-btn):not(.transfer-menu-trigger):not(.fav-action-btn) {
  min-height: var(--touch-target-min);
}

/* ============================================
   TABLET SPLIT VIEW LAYOUT
   Show sidebar and message area side by side
   ============================================ */

/* Small tablets (768px - 1023px) */
@media (min-width: 850px) and (max-width: 1023px) {
  /* Main content area uses row layout */
  .main-content-area {
    flex-direction: row;
  }
  
  /* Conversations sidebar - narrower on small tablets */
  .conversations-sidebar {
    width: 320px;
    min-width: 280px;
    max-width: 350px;
    flex-shrink: 0;
  }
  
  /* Message area fills remaining space */
  .message-area {
    flex: 1;
    min-width: 0; /* Allow shrinking */
  }
  
  /* Adjust header for tablet */
  .header-text h1 {
    font-size: 1.125rem;
  }
  
  .header-text p {
    font-size: 0.6875rem;
  }
}

/* Larger tablets (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Wider sidebar on larger tablets */
  .conversations-sidebar {
    width: 380px;
    min-width: 320px;
    max-width: 420px;
  }
  
  .message-area {
    flex: 1;
  }
  
  /* Can show contact panel inline on larger tablets */
  #contactPanel:not(.hidden) {
    width: 300px;
    flex-shrink: 0;
  }
}

/* ============================================
   TABLET NAVIGATION ADJUSTMENTS
   ============================================ */

/* Tablet bottom navs - slightly larger buttons */
@media (min-width: 850px) and (max-width: 1199px) {
  .call-nav-btn,
  .sms-nav-btn {
    height: 64px;
    padding: 0.5rem 1rem;
  }
  
  .call-nav-btn i,
  .sms-nav-btn i {
    font-size: 1.125rem;
  }
  
  .call-nav-btn .text-xs,
  .sms-nav-btn .text-xs {
    font-size: 0.75rem;
  }
}

/* ============================================
   TABLET CONVERSATION LIST
   ============================================ */

@media (min-width: 850px) and (max-width: 1199px) {
  /* Conversation items - more padding on tablet */
  .conversation-item {
    padding: 14px 16px;
  }
  
  /* Avatar size */
  .conversation-item .avatar,
  .conversation-item img {
    width: 48px;
    height: 48px;
  }
  
  /* Text sizing */
  .conversation-item .conversation-name {
    font-size: 0.9375rem;
  }
  
  .conversation-item .conversation-preview {
    font-size: 0.8125rem;
  }
}

/* ============================================
   TABLET MESSAGE AREA
   ============================================ */

@media (min-width: 850px) and (max-width: 1199px) {
  /* Message input area */
  .message-input-container {
    padding: 12px 16px;
  }
  
  .message-input-container textarea,
  .message-input-container input {
    font-size: 1rem;
    padding: 12px 16px;
  }
}

/* ============================================
   TABLET CALL PANEL
   ============================================ */

@media (min-width: 850px) and (max-width: 1199px) {
  /* Dialpad - larger buttons on tablet */
  #dialpadView .dialpad-btn {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
  }
  
  #dialpadView .dialpad-grid {
    gap: 12px;
  }
  
  /* Active call view */
  #activeCallView {
    padding: 24px;
  }
  
  .active-call-avatar-wrapper > div {
    width: 120px;
    height: 120px;
  }
  
  #callTimer {
    font-size: 2.5rem;
  }
  
  #activeCallName {
    font-size: 1.5rem;
  }
  
  /* Call control buttons */
  .call-control-btn {
    width: 64px;
    height: 64px;
  }
}

/* ============================================
   TABLET SETTINGS VIEW
   ============================================ */

@media (min-width: 850px) and (max-width: 1199px) {
  /* Settings can show sidebar and panel side by side */
  #settingsView .settings-container {
    flex-direction: row;
  }
  
  #settingsView .settings-sidebar {
    width: 280px;
    flex-shrink: 0;
  }
  
  #settingsView .settings-panels {
    flex: 1;
  }
}

/* ============================================
   TABLET CONTACT PANEL
   ============================================ */

@media (min-width: 850px) and (max-width: 1199px) {
  /* Contact panel as modal - larger on tablet */
  #contactPanel:not(.hidden) {
    width: 450px;
    max-width: 80vw;
    max-height: 85vh;
  }
}

/* ============================================
   TABLET HEADER
   ============================================ */

@media (min-width: 850px) and (max-width: 1199px) {
  /* Show full header actions on tablet */
  .header-actions-desktop {
    display: flex !important;
  }
  
  .header-menu-btn {
    display: none !important;
  }
  
  /* Header padding */
  header .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ============================================
   IPAD SPECIFIC ADJUSTMENTS
   Common iPad resolutions in portrait:
   - iPad Mini: 768px
   - iPad: 810px  
   - iPad Air: 820px
   - iPad Pro 11": 834px
   - iPad Pro 12.9": 1024px
   ============================================ */

/* iPad Mini (768px exactly) */
@media (min-width: 850px) and (max-width: 810px) {
  .conversations-sidebar {
    width: 300px;
    min-width: 280px;
  }
}

/* iPad / iPad Air (810px - 834px) */
@media (min-width: 810px) and (max-width: 900px) {
  .conversations-sidebar {
    width: 340px;
  }
}

/* iPad Pro 11" (834px - 1024px) */
@media (min-width: 834px) and (max-width: 1024px) {
  .conversations-sidebar {
    width: 360px;
  }
}

/* iPad Pro 12.9" (1024px+) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .conversations-sidebar {
    width: 400px;
  }
  
  /* Can potentially show 3 columns */
  .main-content-area.show-contact-panel {
    /* When contact panel is visible */
  }
}

/* ============================================
   TABLET MODAL ADJUSTMENTS
   ============================================ */

@media (min-width: 850px) and (max-width: 1199px) {
  /* Modals should be appropriately sized */
  .modal-content,
  [role="dialog"] {
    max-width: 600px;
    max-height: 80vh;
  }
  
  /* Full-screen modals on tablet can be centered */
  .modal-fullscreen {
    width: 90vw;
    height: 90vh;
    max-width: 900px;
    margin: 5vh auto;
    border-radius: 12px;
  }
}

/* ============================================
   TABLET SCROLLING BEHAVIOR
   ============================================ */

@media (min-width: 850px) and (max-width: 1199px) {
  /* Smoother scrolling on tablets */
  .conversations-sidebar,
  #conversationsList,
  #messageThread,
  #callHistoryList {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Custom scrollbars on tablet (optional - shows thin scrollbar) */
  .conversations-sidebar::-webkit-scrollbar,
  #conversationsList::-webkit-scrollbar,
  #messageThread::-webkit-scrollbar {
    width: 6px;
  }
  
  .conversations-sidebar::-webkit-scrollbar-thumb,
  #conversationsList::-webkit-scrollbar-thumb,
  #messageThread::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  
  .dark .conversations-sidebar::-webkit-scrollbar-thumb,
  .dark #conversationsList::-webkit-scrollbar-thumb,
  .dark #messageThread::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }
}