/* Maestro dashboard — comprehensive responsive pass (v1.3.1, US-055).
   Lives AFTER styles.css / sidebar.css / chat.css / email.css so it overrides
   them on phone + tablet portrait. Hard cap 200 LOC.

   Breakpoints used:
     (max-width: 600px)                  — phone
     (min-width: 601px) and (max-width: 900px)   — tablet portrait
     (max-width: 900px)                  — combined small
*/

/* --- A. left rail becomes an off-canvas drawer on phone --- */
#rail-drawer-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-primary); font-size: 1.2rem;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  cursor: pointer; border-radius: 4px; margin-right: 8px;
}
.rail-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 240; opacity: 0; transition: opacity .18s ease;
  pointer-events: none;
}
body.rail-drawer-open .rail-drawer-backdrop { opacity: 1; pointer-events: auto; }

@media (max-width: 600px) {
  #rail-drawer-toggle { display: inline-flex; align-items: center; justify-content: center; }
  /* Hide hamburger when on email routes — email view has its own ☰ already. */
  body.hide-rail-toggle #rail-drawer-toggle { display: none; }
  .header-inner { flex-wrap: nowrap; gap: 8px; }
  .header-inner > .brand { flex: 1; min-width: 0; }
  .brand .product { font-size: 1rem; }
  .brand .org { font-size: 0.55rem; letter-spacing: 2px; }

  /* B. Top-bar collapses */
  .ws-chip { display: none !important; }
  .who { gap: 8px; font-size: 0.7rem; }
  .who-text { display: none; }
  .role-pill { display: none; }
  .logout { min-width: 44px; min-height: 44px; padding: 8px 12px; }

  /* Rail off-canvas drawer */
  .app-shell { flex-direction: column; }
  .left-rail {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 260px; max-width: 80vw;
    flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden;
    padding: 16px 0; background: var(--bg-surface);
    border-right: 1px solid var(--border); border-bottom: none;
    z-index: 250; transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 4px 0 12px rgba(0,0,0,0.4);
  }
  body.rail-drawer-open .left-rail { transform: translateX(0); }
  .left-rail a {
    border-left: 3px solid transparent !important;
    border-bottom: none !important;
    padding: 12px 18px !important; min-height: 44px;
    white-space: normal !important; font-size: 0.95rem;
  }
  .left-rail a.active { border-left-color: var(--maestro) !important; }
  .rail-subitems { margin: 0 0 4px 18px; }
  .rail-subitems a { padding: 10px 14px !important; min-height: 40px; }

  /* C. Projects grid + filter row */
  .projects-grid { grid-template-columns: 1fr !important; }
  .projects-filter-row { gap: 6px; }
  .status-tab, .progress-chip {
    font-size: 0.75rem; padding: 8px 10px;
    min-height: 36px; display: inline-flex; align-items: center;
  }
  .project-progress-chips { flex-direction: column; align-items: stretch; }
  .project-progress-chips .chip-set { width: 100%; }
  .proj-sort { width: 100%; min-height: 44px; padding: 10px 12px; }

  /* D. Items browse — stacked cards */
  .items-browse-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important; padding: 12px 8px;
  }
  .items-browse-row .ib-title { white-space: normal; overflow: visible; }
  .ib-filters select, .ib-filters input[type=search] {
    width: 100%; min-height: 40px; padding: 10px 12px;
  }
  .items-browse-strip .ib-row { gap: 6px; }

  /* E. Kanboard — single column; status picker is rendered by JS */
  .kanboard { grid-template-columns: 1fr !important; }
  .kan-mobile-picker {
    display: block; width: 100%;
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-primary); padding: 12px;
    font-size: 0.95rem; min-height: 44px;
  }
  .kan-card { position: relative; padding-right: 44px; }
  .kan-card-menu {
    position: absolute; top: 4px; right: 4px;
    width: 44px; height: 44px;
    background: transparent; border: none;
    color: var(--text-muted); font-size: 1.2rem; cursor: pointer;
  }
  .kan-card-menu:hover { color: var(--text-primary); }

  /* F. Edit modal — full-screen sheet */
  .modal-backdrop { padding: 0; }
  .modal {
    inset: 0; max-width: 100%; width: 100%; max-height: 100dvh; height: 100dvh;
    border-radius: 0; padding: 18px;
  }

  /* G. Chat shell — collapsible contacts */
  .chat-shell {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .chat-contacts { max-height: 30vh; }

  /* H. Touch targets — bump small icon buttons */
  .rail-caret { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
  .project-del { min-width: 44px; min-height: 44px; font-size: 1.2rem; }
  .type-chip { min-height: 36px; display: inline-flex; align-items: center; }
  .btn, .btn.small { min-height: 38px; padding: 10px 16px; }
  .composer-toolbar button, .composer-toolbar select { min-height: 36px; min-width: 36px; }

  /* I. Footer + main padding */
  main { padding: 16px 12px !important; }
  footer { padding: 14px 12px; font-size: 0.7rem; }
  .panel { padding: 16px; }
  .panel-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .panel h2 { font-size: 1.15rem; }
}

/* J. Tablet portrait (601–900px) — keep rail visible at top as horiz strip
   (the existing sidebar.css rule already handles this), but make sure the
   kanboard is 2 columns instead of 4 so cards don't crush. */
@media (min-width: 601px) and (max-width: 900px) {
  .kanboard { grid-template-columns: 1fr 1fr; }
  .items-browse-row { grid-template-columns: 24px 70px 1fr 80px 50px auto; gap: 6px; }
  .ib-pts, .ib-ass, .ib-age { display: none; }
  .projects-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* K. 100dvh fallback for chat + email shells — Safari < 15.4 will fall back
   to 100vh, modern Safari + Chrome use 100dvh which respects the dynamic
   browser toolbar. */
.chat-shell { height: calc(100vh - 160px); height: calc(100dvh - 160px); }
.email-shell, .email-shell-3pane { height: calc(100vh - 150px); height: calc(100dvh - 150px); }

/* L. Defensive horizontal-scroll guard — at phone widths, no view should
   spill past the viewport. Any element that does is a bug, but clip it so
   the user can't feel the breakage while we fix the underlying issue. */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  main { min-width: 0; overflow-x: hidden; }
  .panel { min-width: 0; }
  /* Long emails / display names in the home identity table truncate
     instead of pushing the row off-canvas. */
  .info-table, .home-identity, .home-identity table { width: 100%; table-layout: fixed; }
  .info-table td, .home-identity td { word-break: break-word; overflow-wrap: anywhere; }
  /* API keys (and other tabular views) become stacked cards on phone.
     Hide the thead and reflow each tbody row as a labeled card. */
  table.users-table { display: block; width: 100%; }
  table.users-table thead { display: none; }
  table.users-table tbody { display: block; }
  table.users-table tr {
    display: block;
    border: 1px solid var(--border); border-radius: 4px;
    margin-bottom: 12px; padding: 12px;
    background: var(--bg-card);
  }
  table.users-table td {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 6px 0; border: none; gap: 12px;
    font-size: 0.9rem;
  }
  table.users-table td::before {
    content: attr(data-label); flex-shrink: 0;
    color: var(--text-muted); font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 1px;
    min-width: 80px; padding-top: 2px;
  }
  table.users-table td:last-child { justify-content: flex-end; }
  table.users-table td:last-child::before { display: none; }
}