/* ═══════════════════════════════════════════════════════
   responsive.css — adapts the desktop layout for tablets & phones
   ═══════════════════════════════════════════════════════

   Strategy:
   - On screens ≤ 900px, the fixed right-side sidebar slides off-screen
     and is reopened via a hamburger button at the top-right corner.
   - Main content reclaims the full width.
   - Two-column profile grids collapse to a single column.
   - Tables become horizontally scrollable so columns don't crush.

   The hamburger button is always in the DOM but hidden on desktop.
*/

/* ── Hamburger button (default: hidden, shown on small screens) ── */
.menu-toggle{
  display:none;
  position:fixed;top:12px;right:12px;z-index:200;
  width:46px;height:46px;border-radius:12px;border:none;
  background:#2563EB;color:#fff;font-size:24px;line-height:1;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);
  align-items:center;justify-content:center
}
.menu-toggle:hover{background:#1D4ED8}
.menu-toggle:active{transform:scale(.94)}

/* ── Backdrop behind the open sidebar (also default hidden) ── */
.sidebar-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.45);z-index:99;
  animation:fadeIn .18s ease
}
.sidebar-backdrop.open{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ═══════════════════════════════════════════════════════
   TABLET & MOBILE (≤ 900px wide  OR  ≤ 500px tall)
   ═══════════════════════════════════════════════════════
   The height clause catches phones held in landscape (e.g. Galaxy A51
   at 914×412) where the desktop sidebar still tries to render but
   there's not enough vertical room — we want the hamburger UX. */
@media (max-width:900px), (max-height:500px){
  /* Force body/html to never scroll horizontally — otherwise stray wide
     children (a long word, a fixed-width table) push the layout sideways
     and content appears compressed against the right edge. */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Sidebar slides off-screen to the right (RTL).
     We use `right` rather than `transform` because some mobile browsers
     mishandle transform on fixed elements at certain zoom levels. */
  .sidebar{
    right:-280px !important;
    transition:right .25s ease;
    width:260px;
    box-shadow:-4px 0 16px rgba(0,0,0,.12)
  }
  .sidebar.open{right:0 !important}

  /* Hamburger appears */
  .menu-toggle{display:inline-flex}

  /* Main content reclaims the full width, gets top breathing room for the button */
  .main-content{
    margin-right:0 !important;
    padding:64px 14px 24px
  }

  /* Page header stacks more gracefully */
  .page-header{flex-direction:column;align-items:stretch}
  .page-title{font-size:24px}
  .header-actions{justify-content:flex-start}

  /* Profile two-column layout → single column, no sticky */
  .profile-grid{
    grid-template-columns:1fr;
    gap:14px
  }
  .profile-grid > div:last-child{
    position:static;
    max-height:none;
    overflow:visible
  }

  /* Info grids inside sections also collapse */
  .info-grid{grid-template-columns:1fr;gap:10px}

  /* Profile section padding tightens */
  .profile-section{padding:16px}
  .section-title{font-size:17px}

  /* Tables get a horizontal scroll wrapper so columns stay readable.
     The trick (Airtable-style): the name column stays sticky on the
     right edge while everything else scrolls. */
  .table-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-card table{min-width:640px}
  thead th{font-size:14px;padding:9px 8px}
  tbody td{font-size:14px;padding:9px 8px}

  /* Freeze the name column to the right (RTL) so the row identity
     is always visible while scrolling other fields. */
  td.td-name,
  thead th:nth-child(3) {
    position: sticky;
    right: 0;
    background: #fff;
    z-index: 4;
    box-shadow: -3px 0 4px rgba(0,0,0,.04);
  }
  /* group-header rows shouldn't get the freeze treatment */
  tr[onclick*="_toggleCandGroup"] td { position: static !important; }

  /* Sticky thead overlaps the first group-header row on small screens
     (toolbar is taller, top:74px offset is wrong). Switch to plain
     non-sticky so the column headers stay at the natural top of the
     table and group rows don't get covered. */
  thead th{ position:static !important; top:auto !important }

  /* Toolbar also un-sticks on mobile so it doesn't compete for top space.
     Force wrap so search box + filter dropdowns never overflow off-screen. */
  .toolbar{
    position:static !important; top:auto !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    padding:10px !important
  }
  .toolbar > *{ flex:1 1 auto; min-width:0; max-width:100% }
  .filter-select, .search-input{
    font-size:14px !important;
    max-width:100% !important;
    width:100%
  }

  /* Modal frames fit better on small screens */
  .modal{
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 40px) !important;
    margin:12px
  }

  /* Dashboard grids collapse from 4/3/2 columns down to 2 columns.
     Force the parent to fill its container, and stat-cards inside to be
     full-width within their grid cell. */
  .dash-grid-4,
  .dash-grid-3,
  .dash-grid-2{
    grid-template-columns:1fr 1fr !important;
    width:100% !important;
    gap:10px !important
  }
  .dash-grid-4 > *,
  .dash-grid-3 > *,
  .dash-grid-2 > *{ width:auto !important; min-width:0 }
  .stat-card{ padding:14px !important }
  .stat-icon-box{ width:42px !important; height:42px !important; font-size:20px !important }
  .stat-value{ font-size:26px !important }
  .stat-label{ font-size:13px !important }

  /* Login card adapts */
  .login-card{margin:14px;padding:24px}

  /* Attachment section — keep section title from wrapping awkwardly when
     the refresh button takes space next to the chevron. The button shrinks
     to an icon-only form on phones (full label "🔄 רענן" on desktop). */
  .att-refresh-icon{display:inline}
  .att-refresh-label{display:none}
  .att-refresh{padding:4px 8px !important;font-size:14px !important;line-height:1}
  .section-title{gap:8px;flex-wrap:wrap}

  /* The per-field rows (תמונה / רזומה / אישורים) — give the "+ הוסף"
     button less prominence so the label has more room. */
  .att-add-row{flex-wrap:wrap;gap:6px !important}

  /* Settings → task-template editor — the 4-column desktop grid
     (status | description | days | reset) becomes a stacked layout. */
  .tpl-row{
    grid-template-columns:1fr 90px 90px !important;
    grid-template-areas:'status status status' 'desc desc desc' 'days reset .' !important;
    gap:6px !important;
    padding:10px 6px !important
  }
  .tpl-row > :nth-child(1){grid-area:status}
  .tpl-row > :nth-child(2){grid-area:desc}
  .tpl-row > :nth-child(3){grid-area:days}
  .tpl-row > :nth-child(4){grid-area:reset}
  /* The visual header row is meaningless once we've stacked rows — hide it. */
  .tpl-row-head{display:none !important}
}

/* Default (desktop): show the full "🔄 רענן" label, hide the bare icon.
   Mobile media query above flips these. */
.att-refresh-icon{display:none}
.att-refresh-label{display:inline}

/* ═══════════════════════════════════════════════════════
   PHONE (≤ 560px) — extra tightening
   ═══════════════════════════════════════════════════════ */
@media (max-width:560px){
  .main-content{padding:64px 10px 20px}
  .page-title{font-size:21px}
  .dash-grid-4,
  .dash-grid-3,
  .dash-grid-2{grid-template-columns:1fr !important}
  thead th, tbody td{font-size:14px;padding:8px 8px}
  .profile-section{padding:14px}
  .menu-toggle{top:10px;right:10px;width:42px;height:42px;font-size:22px}
}

/* ═══════════════════════════════════════════════════════
   TASK ITEMS — re-stack on small screens
   ═══════════════════════════════════════════════════════
   On desktop, a task row is one wide flex line: arrow | check | title+meta | chip
   On narrow screens, that's <60px per piece — long Hebrew words get
   wrapped letter-by-letter. Switch to a 2D layout: top row has the
   arrow/check + chip, content area gets the full width below. */
@media (max-width:700px){
  .task-item{
    flex-wrap:wrap;
    align-items:flex-start;
    padding:12px 14px;
    gap:10px
  }
  .task-content{
    flex:1 1 100%;
    order:3;
    min-width:0
  }
  .task-title{
    font-size:16px !important;
    line-height:1.4;
    word-break:break-word;
    overflow-wrap:break-word
  }
  .task-today .task-title{ font-size:17px !important }
  .task-meta{ font-size:13px; gap:8px }
  .task-meta > span{ flex:0 1 auto; max-width:100% }
  .due-chip{
    margin-right:auto;
    font-size:13px !important;
    padding:4px 10px !important
  }
  /* Highlight border less aggressive on narrow screens */
  .task-today,
  .task-item.task-today:hover{
    padding-right:10px !important;
    border-right-width:4px !important
  }
}

/* ═══════════════════════════════════════════════════════
   DASHBOARD TASK ROWS — even tighter when nested in a half-grid
   ═══════════════════════════════════════════════════════
   On the dashboard, task rows live inside "משימות להיום" card which
   is half-width. Need extra-small typography there. */
@media (max-width:900px){
  .profile-section .task-item{
    padding:8px 10px !important;
    gap:8px !important
  }
  .profile-section .task-title{
    font-size:14px !important;
    line-height:1.35
  }
  .profile-section .task-today .task-title{ font-size:15px !important }
  .profile-section .task-meta{ font-size:12px !important; gap:6px !important }
  .profile-section .due-chip{ font-size:11px !important; padding:3px 8px !important }
}