/*
  Claridi Agility - iPhone & Mobile Optimization
  Targets devices under 768px (iPhones, Android, iPads in portrait)
*/

@media (max-width: 768px) {
  /* 1. App Layout Reconstruction */
  .app-shell {
    grid-template-columns: 1fr; /* Remove sidebar column */
    grid-template-rows: 56px 1fr 60px; /* Add space for bottom nav */
    height: 100vh;
    overflow: hidden;
  }

  /* 2. Transform Sidebar to Bottom Navigation */
  .side-nav {
    grid-row: 3;
    grid-column: 1;
    flex-direction: row;
    padding: 0;
    border-right: none;
    border-top: 1px solid var(--v1-border);
    justify-content: space-around;
    align-items: center;
    background: var(--glass-bg-dark);
    z-index: 200;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .side-nav nav {
    display: flex;
    flex-direction: row;
    width: max-content;
    min-width: 100%;
    justify-content: space-around;
  }

  .side-nav .nav-item {
    flex-direction: column;
    gap: 4px;
    padding: 8px 6px;
    font-size: 9px;
    margin-bottom: 0;
    border-left: none !important;
    border-bottom: 2px solid transparent;
    flex: 0 0 auto;
    text-align: center;
    justify-content: center;
    min-width: 52px;
  }

  .side-nav .nav-item.active {
    background: transparent;
    border-bottom: 2px solid var(--v1-accent);
    color: var(--v1-accent);
  }

  .side-nav .nav-icon {
    width: 18px;
    height: 18px;
  }

  /* Hide context switcher on mobile to save space */
  .shell-context-footer {
    display: none;
  }

  /* 3. Main Workspace Adjustments */
  .main-workspace {
    grid-row: 2;
    grid-column: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 4. War Room / Kanban Column Stacking */
  .kanban-container {
    flex-direction: column;
    gap: 24px;
    padding: 16px;
    overflow-y: auto;
  }

  .kanban-column {
    min-width: 100%;
    width: 100%;
  }

  .dashboard-view {
    grid-template-columns: 1fr !important; /* Stack detail panel */
  }

  /* 5. Dashboard Header & Search Optimization */
  .top-navbar {
    padding: 0 12px;
  }

  .shell-search-container {
    display: none; /* Hide search in top bar on small screens */
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
  }

  .dashboard-tabs {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 8px;
  }

  .dashboard-actions {
    width: 100%;
    overflow-x: auto;
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
  }

  .project-selector-container {
    width: 100%;
  }

  /* 6. Detail Panel Overlays */
  .dashboard-detail-panel {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 60px;
    width: 100% !important;
    z-index: 150;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .dashboard-detail-panel:not([style*="display: none"]) {
    transform: translateX(0);
  }

  .detail-flyout {
    width: 100% !important;
    right: -100% !important;
  }

  .detail-flyout.open {
    right: 0 !important;
  }

  /* 7. Grid & Table Optimization */
  .v1-grid-container {
    margin: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .v1-grid th:nth-child(2),
  .v1-grid td:nth-child(2),
  .v1-grid th:nth-child(3),
  .v1-grid td:nth-child(3),
  .v1-grid th:nth-child(7),
  .v1-grid td:nth-child(7) {
    display: none; /* Hide less critical columns on iPhone */
  }

  /* 8. Portfolio Stats */
  .portfolio-stats {
    flex-direction: column;
    gap: 12px !important;
    padding: 0 16px !important;
  }

  #initiate-project-btn {
    width: calc(100% - 32px);
    margin: 16px !important;
  }

  /* 9. View Headers */
  .view-header {
    padding: 16px !important;
  }

  .view-header h2 {
    font-size: 1.2rem;
  }

  /* 10. Notification Panel - Full Width */
  #notification-panel {
    width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: 12px !important;
    top: 54px !important;
  }

  /* 11. Filter Bar - Stack Vertically */
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .filter-bar select {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* 12. Workload Heatmap */
  .workload-heatmap-grid {
    grid-template-columns: 1fr !important;
  }

  /* 13. Dependency Graph */
  .dep-graph-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 14. Reports Grid */
  .reports-grid {
    grid-template-columns: 1fr !important;
  }

  .reports-grid .report-card {
    grid-column: 1 !important;
  }

  .report-nav-item {
    font-size: 11px !important;
    padding: 8px 12px !important;
  }

  /* 15. Resource Hub */
  .resource-hub {
    padding: 16px !important;
  }

  .resource-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 16. Copilot Panel */
  .copilot-panel {
    width: 100% !important;
    right: -100% !important;
  }

  .copilot-panel.open {
    right: 0 !important;
  }

  /* 17. SteerCo Modal */
  .steerco-modal {
    width: 100% !important;
  }

  /* 18. Touch-Friendly Buttons */
  .pill, button {
    min-height: 36px;
  }

  /* 19. Drag and drop visual feedback */
  .drag-row {
    touch-action: pan-y;
  }

  /* 20. Logo sizing */
  .logo svg {
    width: 140px;
    height: 32px;
  }

  .shell-agility-label {
    font-size: 10px !important;
  }

  /* 21. User badge compact */
  .user-badge .user-name {
    display: none;
  }
}

/* iPad / Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
  .side-nav {
    width: 60px;
  }

  .side-nav .nav-item span {
    display: none;
  }

  .side-nav .nav-item {
    justify-content: center;
    padding: 12px;
  }

  .detail-flyout {
    width: 450px !important;
  }

  .reports-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}