/*
  BAJ Farm — Mobile-first PWA layer
  Designed & Developed by: Babatunde Adedeji Adelaja · 2026 · v1.0.0
  ---------------------------------------------------------------------------
  ADDITIVE ONLY. Every rule that changes layout is gated behind
  @media (max-width:768px) so the desktop UI is 100% unchanged.
  Provides: bottom nav, floating Quick Record, quick-record sheet, QR overlay,
  install + offline/sync banners, 44px touch targets, stacked KPIs,
  table→card transforms, sticky action bars, one-hand ergonomics, safe areas.
*/

:root{
  --baj-green:#063d2a; --baj-green2:#0b4d3a; --baj-gold:#e0a94a; --baj-gold2:#f0b64a;
  --baj-cream:#f5efdf; --baj-ink:#173d2a; --baj-red:#7c1f1f;
  --baj-safe-b: env(safe-area-inset-bottom, 0px);
  --baj-navh: 62px;
}

/* Chrome that only ever shows on phones/tablets — hidden on desktop by default */
#bajBottomNav, #bajFab, #bajSheet, #bajSheetScrim,
#bajQR, #bajInstallBar, #bajNetBar, #bajIosHint{ display:none; }

/* ===========================================================================
   MOBILE  (phones + small tablets)
   =========================================================================== */
@media (max-width:768px){

  /* ---- global touch ergonomics ---- */
  html{ -webkit-text-size-adjust:100%; }
  /* Bottom-bar clearance is reserved ONLY while the authenticated app chrome
     is mounted (mobile.js adds body.baj-mob-on with the tabbar). Public views
     and the login screen keep their natural full-height layout — no phantom
     gap, nothing reserved for a bar that is not there. Safe-area is always
     respected via the shared --baj-safe-b token. (v38 mobile QA #4/#7) */
  body{ padding-bottom: var(--baj-safe-b) !important; }
  body.baj-mob-on{ padding-bottom: calc(var(--baj-navh) + var(--baj-safe-b) + 8px) !important; }
  /* 44px minimum touch targets for interactive elements */
  button, .btn, .nl, a.btn, input[type=submit], input[type=button],
  select, .chip, .qchip, .tab, .pill{ min-height:44px; }
  button, .btn{ touch-action:manipulation; }
  input, select, textarea{ font-size:16px !important; } /* stop iOS zoom-on-focus */

  /* keep the app's top nav drawer usable, but let our bottom bar drive primary nav */
  body.baj-mob-on .nav-links.open{ padding-bottom: calc(var(--baj-navh) + var(--baj-safe-b)); }

  /* ---- public drawer: consistent compact rhythm (v38 mobile QA #6) ----
     The blanket 44px touch rule inflated every drawer row and the drawer's
     own padding added to it. Rows stay comfortably tappable (42px) with a
     tighter, even rhythm; readability and design unchanged. */
  .nav-links.open{ gap:2px; padding:8px 10px calc(10px + var(--baj-safe-b)); }
  .nav-links.open .nl, .nav-links.open .nl-lock{
    min-height:42px; padding:9px 12px; font-size:13px; line-height:1.25;
  }

  /* ---- Tag Search bar: roomy one-hand layout (v38 mobile QA #5) ----
     Same components, mobile flow only: the input takes its own full row;
     Search + Clear share the row below at full touch height. No overflow. */
  .tag-search-bar{ flex-wrap:wrap; gap:10px; }
  .tag-search-bar input{ flex:1 1 100%; min-width:0; }
  .tag-search-bar .tag-s-btn{ flex:1 1 auto; min-height:46px; }
  .tag-search-bar .tag-clr{ flex:0 0 auto; min-width:48px; min-height:46px; }

  /* ---- KPI / summary cards stack vertically ---- */
  .kpis, .kpi-grid, .exec-kpis, .dash-kpis, .stat-grid{
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important;
  }
  .kpi, .exec-kpi, .dash-kpi, .stat-card{ width:auto !important; }
  @media (max-width:420px){
    .kpis, .kpi-grid, .exec-kpis, .dash-kpis, .stat-grid{ grid-template-columns:1fr !important; }
  }

  /* ---- wide tables become horizontally scrollable, not clipped ---- */
  .tbl-wrap, .table-wrap, .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.tbl, table.data, .ledger table{ min-width:520px; }

  /* Opt-in: any table tagged .baj-cardify collapses to stacked cards on mobile */
  table.baj-cardify, table.baj-cardify thead, table.baj-cardify tbody,
  table.baj-cardify tr, table.baj-cardify td, table.baj-cardify th{ display:block; }
  table.baj-cardify thead{ position:absolute; left:-9999px; }
  table.baj-cardify tr{
    background:#fff; border:1px solid rgba(6,61,42,.12); border-radius:14px;
    margin:0 0 12px; padding:8px 12px; box-shadow:0 6px 18px -12px rgba(6,61,42,.4);
  }
  table.baj-cardify td{
    display:flex; justify-content:space-between; gap:14px; align-items:center;
    padding:8px 2px; border:none; border-bottom:1px solid rgba(6,61,42,.07); text-align:right;
  }
  table.baj-cardify td:last-child{ border-bottom:none; }
  table.baj-cardify td::before{
    content:attr(data-label); font-weight:700; color:var(--baj-ink);
    text-align:left; flex:0 0 42%; font-size:12.5px; text-transform:uppercase; letter-spacing:.02em;
  }

  /* ---- generic collapsible card helper ---- */
  .baj-collapse > .baj-collapse-body{ display:none; }
  .baj-collapse.open > .baj-collapse-body{ display:block; }
  .baj-collapse > .baj-collapse-head{ cursor:pointer; }

  /* ---- responsive charts / svg resize inside their container ---- */
  svg[width], canvas{ max-width:100% !important; height:auto !important; }
  .chart, .chart-wrap, .recharts-wrapper{ width:100% !important; }

  /* ---- sticky action bar (Record Health / Breeding / Complete Task) ---- */
  .baj-sticky-actions{
    position:sticky; bottom: calc(var(--baj-navh) + var(--baj-safe-b) + 8px); z-index:60;
    display:flex; gap:8px; padding:10px 88px 10px 10px; margin-top:12px;
    /* right clearance = FAB zone (60px + 16px offset + margin) so the floating
       Quick-Record button can never cover the primary action (v38 QA #3) */
    background:linear-gradient(180deg, rgba(246,240,226,0), var(--baj-cream) 32%);
  }
  .baj-sticky-actions .btn, .baj-sticky-actions button{ flex:1; min-height:48px; font-weight:700; }

  /* modals: full-height sheets, thumb-reachable close */
  .scrim.on > *, .modal.on > *{ max-height:92vh; }

  /* ===================== BOTTOM NAVIGATION ===================== */
  #bajBottomNav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:900;
    height: calc(var(--baj-navh) + var(--baj-safe-b));
    padding-bottom: var(--baj-safe-b);
    background:var(--baj-green);
    border-top:1px solid rgba(224,169,74,.35);
    box-shadow:0 -8px 24px -12px rgba(0,0,0,.5);
    justify-content:space-around; align-items:stretch;
  }
  #bajBottomNav .bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; background:none; border:none; color:#bcd3c6; font-size:10.5px; font-weight:600;
    min-height:44px; padding:6px 2px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  #bajBottomNav .bn-item .bn-ic{ font-size:20px; line-height:1; }
  #bajBottomNav .bn-item.active{ color:var(--baj-gold2); }
  #bajBottomNav .bn-item.active .bn-ic{ transform:translateY(-1px); filter:drop-shadow(0 0 6px rgba(224,169,74,.5)); }
  #bajBottomNav .bn-item:active{ background:rgba(255,255,255,.06); }

  /* ===================== FLOATING QUICK RECORD (+) ===================== */
  #bajFab{
    display:flex; position:fixed; right:16px;
    bottom: calc(var(--baj-navh) + var(--baj-safe-b) + 16px); z-index:910;
    width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
    align-items:center; justify-content:center;
    background:radial-gradient(120% 120% at 30% 20%, var(--baj-gold2), var(--baj-gold));
    color:var(--baj-green); font-size:32px; font-weight:800; line-height:1;
    box-shadow:0 12px 28px -8px rgba(224,169,74,.7), 0 0 0 4px rgba(6,61,42,.12);
    transition:transform .18s ease;
  }
  #bajFab:active{ transform:scale(.92) rotate(45deg); }
  #bajFab.hide{ display:none; }

  /* ===================== QUICK RECORD SHEET ===================== */
  #bajSheetScrim{ display:none; position:fixed; inset:0; z-index:915; background:rgba(6,20,14,.55); }
  #bajSheetScrim.on{ display:block; }
  #bajSheet{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:920;
    transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
    background:var(--baj-cream); border-radius:20px 20px 0 0;
    padding:10px 14px calc(18px + var(--baj-safe-b));
    box-shadow:0 -16px 40px -12px rgba(0,0,0,.5); max-height:82vh; overflow:auto;
  }
  #bajSheet.on{ transform:translateY(0); }
  #bajSheet .sh-grip{ width:44px; height:5px; border-radius:3px; background:rgba(6,61,42,.22); margin:4px auto 12px; }
  #bajSheet .sh-title{ font-weight:800; color:var(--baj-ink); font-size:16px; margin:0 4px 12px; }
  #bajSheet .sh-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  #bajSheet .sh-btn{
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;
    background:#fff; border:1px solid rgba(6,61,42,.12); border-radius:14px;
    padding:14px 14px; min-height:74px; cursor:pointer; text-align:left;
    box-shadow:0 6px 16px -12px rgba(6,61,42,.5);
  }
  #bajSheet .sh-btn:active{ background:var(--baj-cream); }
  #bajSheet .sh-btn .sh-ic{ font-size:24px; }
  #bajSheet .sh-btn .sh-l{ font-weight:700; color:var(--baj-ink); font-size:14px; }
  #bajSheet .sh-btn .sh-s{ font-size:11.5px; color:#5b6b62; }

  /* ===================== QR SCANNER OVERLAY ===================== */
  #bajQR{ display:none; position:fixed; inset:0; z-index:1000; background:#04120c; }
  #bajQR.on{ display:flex; flex-direction:column; }
  #bajQR video{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
  #bajQR .qr-frame{
    position:absolute; top:50%; left:50%; width:70vw; max-width:320px; aspect-ratio:1;
    transform:translate(-50%,-56%); border:3px solid var(--baj-gold2); border-radius:20px;
    box-shadow:0 0 0 100vmax rgba(4,18,12,.55); }
  #bajQR .qr-scanline{
    position:absolute; left:8%; right:8%; top:10%; height:2px; background:var(--baj-gold2);
    box-shadow:0 0 12px 2px rgba(240,182,74,.8); animation:bajScan 2s linear infinite; }
  @keyframes bajScan{ 0%{top:10%} 50%{top:88%} 100%{top:10%} }
  #bajQR .qr-top{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
    padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px; color:#fff; }
  #bajQR .qr-top b{ font-size:16px; }
  #bajQR .qr-x{ background:rgba(255,255,255,.15); border:none; color:#fff; width:44px; height:44px; border-radius:50%; font-size:20px; }
  #bajQR .qr-bottom{ position:absolute; left:0; right:0; bottom:0; z-index:2; text-align:center;
    padding:16px 16px calc(20px + var(--baj-safe-b)); color:#e7f2ea; }
  #bajQR .qr-hint{ font-size:13px; opacity:.85; margin-bottom:12px; }
  #bajQR .qr-manual{ background:var(--baj-gold); color:var(--baj-green); border:none; border-radius:12px;
    padding:13px 18px; font-weight:800; min-height:48px; width:100%; max-width:320px; }

  /* ===================== INSTALL + NETWORK/SYNC BANNERS ===================== */
  #bajInstallBar{
    display:none; position:fixed; left:10px; right:10px; z-index:930;
    bottom: calc(var(--baj-navh) + var(--baj-safe-b) + 84px);
    background:var(--baj-green); color:#fff; border:1px solid rgba(224,169,74,.45);
    border-radius:14px; padding:12px 14px; align-items:center; gap:12px;
    box-shadow:0 16px 40px -14px rgba(0,0,0,.6); }
  #bajInstallBar.on{ display:flex; }
  #bajInstallBar .ib-txt{ flex:1; font-size:13px; line-height:1.3; }
  #bajInstallBar .ib-txt b{ color:var(--baj-gold2); }
  #bajInstallBar .ib-go{ background:var(--baj-gold); color:var(--baj-green); border:none; border-radius:10px; padding:10px 14px; font-weight:800; min-height:44px; }
  #bajInstallBar .ib-x{ background:none; border:none; color:#bcd3c6; font-size:20px; width:32px; height:44px; }

  #bajNetBar{
    display:none; position:fixed; left:0; right:0; top:0; z-index:940;
    padding:8px 14px calc(8px); font-size:12.5px; font-weight:700; text-align:center; color:#fff;
    transform:translateY(-100%); transition:transform .25s ease; }
  #bajNetBar.on{ display:block; transform:translateY(0); }
  #bajNetBar.offline{ background:var(--baj-red); }
  #bajNetBar.syncing{ background:#b7791f; }
  #bajNetBar.synced{ background:#2E7D32; }

  #bajIosHint{
    display:none; position:fixed; left:10px; right:10px; bottom:calc(var(--baj-safe-b) + 14px); z-index:950;
    background:#fff; color:var(--baj-ink); border:1px solid rgba(6,61,42,.16); border-radius:14px;
    padding:14px 16px; box-shadow:0 16px 44px -12px rgba(0,0,0,.4); font-size:13px; line-height:1.5; }
  #bajIosHint.on{ display:block; }
  #bajIosHint b{ color:var(--baj-green); }
  #bajIosHint .ios-x{ position:absolute; top:8px; right:10px; background:none; border:none; font-size:20px; color:#5b6b62; }

  /* swipe affordance on Daily Ops task cards */
  #dailyOpsRoot [data-task-id], #dailyOpsRoot .ops-task, #dailyOpsRoot .baj-task{
    touch-action:pan-y; transition:transform .18s ease, opacity .18s ease; will-change:transform; }
  .baj-swipe-done{ transform:translateX(110%) !important; opacity:0 !important; }
}

/* Standalone (installed) tweaks — a touch more top padding for the status bar */
@media (max-width:768px) and (display-mode:standalone){
  body{ padding-top: env(safe-area-inset-top, 0px); }
}

/* ===================== Phase 2 — camera capture UI ===================== */
@media (max-width:768px){
  .baj-photo-btn{
    display:inline-flex; align-items:center; gap:7px; min-height:44px;
    margin:10px 0 4px; padding:10px 16px; border-radius:12px; cursor:pointer;
    background:#0b4d3a; color:#f3efe3; border:1px solid #14624a; font-weight:700; font-size:14px;
  }
  .baj-photo-btn:active{ background:#0a3f30; }
  #pg-invoice .baj-photo-btn, #pg-breed .baj-photo-btn{ margin:12px auto; }
}
#bajCamScrim{ position:fixed; inset:0; z-index:1020; background:rgba(6,20,14,.6);
  display:flex; align-items:flex-end; opacity:0; transition:opacity .2s; }
#bajCamScrim.on{ opacity:1; }
#bajCamSheet{ width:100%; background:var(--baj-cream,#f5efdf); border-radius:20px 20px 0 0;
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px)); transform:translateY(100%);
  transition:transform .26s cubic-bezier(.2,.8,.2,1); box-shadow:0 -16px 40px -12px rgba(0,0,0,.5); }
#bajCamScrim.on #bajCamSheet{ transform:translateY(0); }
#bajCamSheet .cam-grip{ width:44px; height:5px; border-radius:3px; background:rgba(6,61,42,.22); margin:4px auto 12px; }
#bajCamSheet .cam-title{ font-weight:800; color:#173d2a; font-size:16px; margin:0 2px 12px; }
#bajCamSheet .cam-prev{ width:100%; max-height:46vh; object-fit:contain; border-radius:14px; background:#000; display:block; }
#bajCamSheet .cam-cap{ width:100%; box-sizing:border-box; margin:12px 0 4px; padding:12px 14px; font-size:16px;
  border:1px solid rgba(6,61,42,.2); border-radius:12px; background:#fff; color:#173d2a; }
#bajCamSheet .cam-actions{ display:flex; gap:10px; margin-top:12px; }
#bajCamSheet .cam-btn{ flex:1; min-height:48px; border-radius:12px; font-weight:800; font-size:15px; border:none; cursor:pointer; }
#bajCamSheet .cam-btn.ghost{ background:#fff; color:#0b4d3a; border:1px solid #0b4d3a; }
#bajCamSheet .cam-btn.gold{ background:var(--baj-gold,#e0a94a); color:#063d2a; }
.__baj_pending, [data-baj-pending]{ outline:1px dashed rgba(224,169,74,.6); }