/* ============================================================================
   v120_mobile.css  -  Mobile / tablet responsive overrides
   ============================================================================
   V120 Phase 7 - Worker Mobile PWA polish.

   Strategy
     - JS components use inline styles for component isolation.
     - This file uses @media queries with !important to override layout-critical
       inline styles on narrow viewports.
     - Targets only the AI COO page roots (#my-day-root, #goals-root, #team-day-root)
       so it does not affect other V120 pages.
     - Universal: works for any tenant. No tenant-specific assumptions.

   Breakpoints
     <= 760px  : phones (single column, stacked actions)
     <= 1024px : tablets (2-column summary grid)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Page roots: tighter padding on phones
---------------------------------------------------------------------------- */
@media (max-width: 760px) {
  #my-day-root,
  #goals-root,
  #team-day-root {
    padding: 14px !important;
  }
}

/* ----------------------------------------------------------------------------
   Summary card grids
   - Desktop: 4 cols
   - Tablet:  2 cols
   - Phone:   2 cols (compact) -- numbers stay readable
---------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #goals-root    > div[style*="repeat(4"],
  #team-day-root > div[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  #goals-root    > div[style*="repeat(4"],
  #team-day-root > div[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Compact summary card on tiny screens */
  #goals-root    > div[style*="repeat(4"] > div,
  #team-day-root > div[style*="repeat(4"] > div {
    padding: 10px 12px !important;
  }
}

/* ----------------------------------------------------------------------------
   Goal grid: stack on mobile (was auto-fill 380px min)
---------------------------------------------------------------------------- */
@media (max-width: 760px) {
  #goals-root > div[style*="auto-fill"] {
    grid-template-columns: 1fr !important;
  }
}

/* ----------------------------------------------------------------------------
   Header rows: stack title + date-buttons vertically on phones
---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  #my-day-root   > div:first-child,
  #team-day-root > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  /* Date selector buttons: full width row */
  #my-day-root   > div:first-child > div:last-child,
  #team-day-root > div:first-child > div:last-child {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* ----------------------------------------------------------------------------
   Filter chip row + new-goal button: stack on phones
---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  #goals-root > div[style*="justify-content:space-between"][style*="margin-bottom:14px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #goals-root > div[style*="justify-content:space-between"][style*="margin-bottom:14px"] button[onclick*="openCreateModal"] {
    width: 100% !important;
  }
}

/* ----------------------------------------------------------------------------
   Tap targets: minimum 44x44px on mobile (Apple HIG / WCAG)
---------------------------------------------------------------------------- */
@media (max-width: 760px) and (hover: none) {
  #my-day-root   button,
  #goals-root    button,
  #team-day-root button {
    min-height: 40px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* ----------------------------------------------------------------------------
   Task action row: stack buttons on phones (Start / Mark done / Skip)
---------------------------------------------------------------------------- */
@media (max-width: 480px) {
  #my-day-root div[style*="margin-top:10px"] > button {
    flex: 1 !important;
  }
}

/* ----------------------------------------------------------------------------
   Drawers (detail / user-detail / modals): full width on phones
---------------------------------------------------------------------------- */
@media (max-width: 760px) {
  #goal-detail-overlay > div,
  #team-user-overlay   > div {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* Modals: side padding on phones so they don't hug edges */
@media (max-width: 600px) {
  #goal-create-overlay,
  #metric-add-overlay,
  #alloc-add-overlay {
    padding: 20px 12px !important;
    align-items: flex-start !important;
  }
  #goal-create-overlay > div,
  #metric-add-overlay  > div,
  #alloc-add-overlay   > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
  }
  /* Modal field grids: stack on phones */
  #goal-create-overlay > div > div[style*="grid-template-columns:1fr 1fr"],
  #metric-add-overlay  > div > div[style*="grid-template-columns:1fr 1fr"],
  #metric-add-overlay  > div > div[style*="grid-template-columns:2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ----------------------------------------------------------------------------
   Team Day grid: simplify column layout on phones
   (User | Designation | Tasks | Progress | Status -> User+Status / Tasks+Progress)
---------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Hide the desktop table header */
  #team-day-root div[style*="grid-template-columns:1.5fr 1fr 0.7fr 1.5fr 0.8fr"][style*="background:#fffaf2"] {
    display: none !important;
  }
  /* Each team row: simplified 2-row layout */
  #team-day-root div[style*="grid-template-columns:1.5fr 1fr 0.7fr 1.5fr 0.8fr"] {
    grid-template-columns: 1fr 80px !important;
    grid-template-areas:
      "name   status"
      "des    tasks"
      "prog   prog" !important;
    row-gap: 4px !important;
    padding: 14px 12px !important;
  }
  #team-day-root div[style*="grid-template-columns:1.5fr 1fr 0.7fr 1.5fr 0.8fr"] > div:nth-child(1) { grid-area: name; }
  #team-day-root div[style*="grid-template-columns:1.5fr 1fr 0.7fr 1.5fr 0.8fr"] > div:nth-child(2) { grid-area: des;    font-size: 12px !important; }
  #team-day-root div[style*="grid-template-columns:1.5fr 1fr 0.7fr 1.5fr 0.8fr"] > div:nth-child(3) { grid-area: tasks;  text-align: right; font-size: 12px !important; }
  #team-day-root div[style*="grid-template-columns:1.5fr 1fr 0.7fr 1.5fr 0.8fr"] > div:nth-child(4) { grid-area: prog; }
  #team-day-root div[style*="grid-template-columns:1.5fr 1fr 0.7fr 1.5fr 0.8fr"] > div:nth-child(5) { grid-area: status; text-align: right; }
}

/* ----------------------------------------------------------------------------
   PWA install banner (rendered by v120_pwa_install.js)
---------------------------------------------------------------------------- */
.v120-install-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  font: 14px DM Sans, sans-serif;
  box-shadow: 0 8px 24px rgba(140, 60, 0, 0.35);
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: v120-install-slide 0.35s ease-out;
}
.v120-install-banner-text { flex: 1; line-height: 1.35; }
.v120-install-banner-title { font-weight: 600; margin-bottom: 2px; }
.v120-install-banner-sub   { font-size: 12px; opacity: 0.92; }
.v120-install-banner button {
  background: #fff; color: #9a3412; border: 0;
  padding: 8px 14px; border-radius: 8px;
  font: 600 13px DM Sans, sans-serif; cursor: pointer;
}
.v120-install-banner button.v120-install-dismiss {
  background: transparent; color: #fff; padding: 6px 10px;
  font-weight: 500; opacity: 0.85;
}
@keyframes v120-install-slide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (min-width: 760px) {
  .v120-install-banner { left: auto; max-width: 420px; }
}