/* Responsive — desktop / tablet / mobile technician UX */

@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2, .grid-2-1, .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  :root { --sidebar-w: 240px; }
  .kanban { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
  .chat-layout { grid-template-columns: 200px 1fr; }
  .form-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 86vw);
    transform: translateX(-105%);
    box-shadow: var(--shadow);
  }

  .sidebar.open { transform: translateX(0); }

  .header, .main { grid-column: 1; }

  .menu-toggle { display: inline-flex; }

  .user-meta { display: none; }

  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .search-wrap { max-width: none; }

  .planning-board {
    grid-template-columns: 1fr;
  }

  .chat-layout {
    grid-template-columns: 1fr;
    min-height: 70vh;
  }

  .chat-side {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .chat-side button {
    border-bottom: 0;
    border-right: 1px solid var(--border);
    white-space: nowrap;
  }
}

/* Technician mobile app mode */
body.tech-mode .sidebar,
body.tech-mode .header .search-wrap,
body.tech-mode .header .role-chip {
  display: none !important;
}

body.tech-mode .app {
  grid-template-columns: 1fr;
}

body.tech-mode .header,
body.tech-mode .main {
  grid-column: 1;
}

body.tech-mode .main {
  padding: 14px 14px 84px;
}

body.tech-mode .mobile-nav {
  display: grid;
}

body.tech-mode .tech-mobile {
  display: block;
}

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .page-head { flex-direction: column; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .form-span-2 { grid-column: span 1; }
  .modal { width: calc(100vw - 12px); border-radius: 14px; }
  .drawer { width: 100vw; }
  .header { padding: 0 10px; gap: 8px; }
  .main { padding: 12px; }
  .btn { padding: 10px 12px; }
  .kanban { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .map-box { height: 360px; }
  table.data { min-width: 640px; }
}

@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .brand-sub { font-size: 0.65rem; }
}