/* =====================================================================
   CONSTRUCTION CRM - Responsive
   Site engineers will use this on a phone in the sun. Big targets,
   readable text, no horizontal scrolling.
   ===================================================================== */

/* ---------------- Tablet ---------------- */
@media (max-width: 1199.98px){
  :root{ --sidebar-w: 220px; }
  .main-content{ padding:18px 18px 40px; }
  .topbar{ padding:0 18px; }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 991.98px){

  .app-wrapper{ margin-left:0; }

  .sidebar{
    transform: translateX(-100%);
    width: 270px;
  }
  .sidebar.open{ transform: translateX(0); }

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

  .topbar{ padding:0 14px; }
  .topbar-title{ font-size:17px; }

  .main-content{
    padding:16px 14px 96px; /* room for the bottom nav */
  }

  /* ---- Bottom navigation ---- */
  .bottom-nav{
    display:flex;
    position:fixed;
    left:0; right:0; bottom:0;
    background: var(--c-card);
    border-top:1px solid var(--c-line);
    z-index:1030;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a,
  .bottom-nav span{
    flex:1;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:3px;
    min-height:58px;
    font-size:10.5px;
    letter-spacing:.4px;
    text-transform:uppercase;
    color: var(--c-muted);
  }
  .bottom-nav i{ font-size:19px; }
  .bottom-nav a.active{ color: var(--c-accent-dk); }
  .bottom-nav a.active i{ color: var(--c-accent-dk); }
  .bottom-nav .disabled{ opacity:.42; }

  /* ---- Readability: 16px inputs stop iOS zooming on focus ---- */
  body{ font-size:15.5px; }
  .form-control, .form-select{ font-size:16px; }

  /* ---- Touch targets ---- */
  .btn{ min-height:44px; padding-left:16px; padding-right:16px; }
  .btn-sm{ min-height:38px; }

  /* ---- Stat cards: one per row, compact ---- */
  .stat-card{ padding:13px 14px; }
  .stat-icon{ width:38px; height:38px; flex:0 0 38px; font-size:17px; }
  .stat-value{ font-size:23px; }

  /* ---- Form action buttons stack full width ---- */
  .form-actions{ display:flex; flex-direction:column; gap:10px; }
  .form-actions .btn{ width:100%; }

  /* ---------------------------------------------------------------
     Card tables
     Add class="table-cards" to a table and give every <td> a
     data-label attribute. The table then stacks into readable cards.
     Labels truncate rather than wrap - a wrapping absolute label
     overlaps the row below it instead of pushing it down.
     --------------------------------------------------------------- */
  .table-cards thead{ display:none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td{ display:block; width:100%; }

  .table-cards tr{
    background: var(--c-card);
    border:1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom:12px;
    padding:6px 4px;
  }
  .table-cards tr:hover{ background: var(--c-card); }

  .table-cards td{
    position:relative;
    border:none !important;
    padding:8px 14px 8px 40%;
    text-align:right;
    font-size:.95rem;
    min-height:38px;
  }
  .table-cards td::before{
    content: attr(data-label);
    position:absolute;
    left:14px; top:8px;
    width:34%;
    text-align:left;
    font-size:.72rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.6px;
    color: var(--c-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .table-cards td:last-child{ border-bottom:none; }

  /* Action buttons inside a card row wrap instead of overflowing */
  .row-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
  .row-actions .btn{ min-width:44px; }
}

/* ---------------- Small phones ---------------- */
@media (max-width: 575.98px){
  .page-head{ flex-direction:column; align-items:flex-start; }
  .page-head > *{ width:100%; }
  .card-body{ padding:14px; }
  .login-body{ padding:26px 22px 24px; }
}

/* ---------------- Motion preference ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---------------- Print ---------------- */
@media print{
  .sidebar, .topbar, .bottom-nav, .btn{ display:none !important; }
  .app-wrapper{ margin-left:0; }
  .main-content{ padding:0; }
}