import { useState, useMemo, useRef, useEffect, useCallback } from "react";
import { AreaChart, Area, BarChart, Bar, LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, ReferenceLine } from "recharts";

// ─── SEED DATA ────────────────────────────────────────────────────────────────
const SEED = [{"name":"Blueberries","category":"Veg & Produce","packWt":125,"packCost":2.07,"costPerG":0.01656,"supplier":"Central"},{"name":"Raspberrys","category":"Veg & Produce","packWt":125,"packCost":2.88,"costPerG":0.02304,"supplier":"Central"},{"name":"Strawberries","category":"Veg & Produce","packWt":400,"packCost":4.32,"costPerG":0.0108,"supplier":"Central"},{"name":"Flat leaf parsley","category":"Veg & Produce","packWt":500,"packCost":2.16,"costPerG":0.00432,"supplier":"Central"},{"name":"Chives","category":"Veg & Produce","packWt":100,"packCost":1.8,"costPerG":0.018,"supplier":"Central"},{"name":"Coriander","category":"Veg & Produce","packWt":100,"packCost":1.8,"costPerG":0.018,"supplier":"Central"},{"name":"Garlic","category":"Veg & Produce","packWt":1000,"packCost":3.6,"costPerG":0.0036,"supplier":"Central"},{"name":"Rocket","category":"Veg & Produce","packWt":500,"packCost":3.42,"costPerG":0.00684,"supplier":"Central"},{"name":"Avocado","category":"Veg & Produce","packWt":1,"packCost":1.13,"costPerG":1.13,"supplier":"Central"},{"name":"Lemons","category":"Veg & Produce","packWt":1000,"packCost":2.7,"costPerG":0.0027,"supplier":"Central"},{"name":"Fries","category":"Dry Goods","packWt":10000,"packCost":24.7,"costPerG":0.00247,"supplier":"Dunns"},{"name":"Brioche burger bun","category":"Bakery","packWt":70,"packCost":0.5,"costPerG":0.007143,"supplier":"Saltire"},{"name":"Scotch steak mince","category":"Meat","packWt":1000,"packCost":11.4,"costPerG":0.0114,"supplier":"Campbells/Gilmores"},{"name":"Whole chickens","category":"Meat","packWt":1000,"packCost":4.0,"costPerG":0.004,"supplier":"Campbells/Gilmores"},{"name":"Smoked bacon","category":"Meat","packWt":1000,"packCost":14.7,"costPerG":0.0147,"supplier":"Campbells/Gilmores"},{"name":"Chicken Thigh","category":"Meat","packWt":1000,"packCost":3.8,"costPerG":0.0038,"supplier":"Campbells/Gilmores"},{"name":"Sirloin steak","category":"Meat","packWt":1000,"packCost":19.95,"costPerG":0.01995,"supplier":"Campbells/Gilmores"},{"name":"Eggs","category":"Dairy","packWt":360,"packCost":85.5,"costPerG":0.2375,"supplier":"Central"},{"name":"Double cream","category":"Dairy","packWt":2000,"packCost":8.55,"costPerG":0.004275,"supplier":"Central"},{"name":"Butter","category":"Dairy","packWt":200,"packCost":11.82,"costPerG":0.0591,"supplier":"Dunns"},{"name":"Halloumi","category":"Dairy","packWt":250,"packCost":3.06,"costPerG":0.01224,"supplier":"Central"},{"name":"PDO Feta cheese","category":"Dairy","packWt":900,"packCost":9.48,"costPerG":0.010533,"supplier":"Dunns"},{"name":"Compote","category":"Bulk Items","packWt":1000,"packCost":5.18,"costPerG":0.00518,"supplier":"House Prep"},{"name":"Hummus","category":"Bulk Items","packWt":1000,"packCost":6.71,"costPerG":0.00671,"supplier":"House Prep"},{"name":"Barbicoa beef","category":"Bulk Items","packWt":1000,"packCost":15.16,"costPerG":0.01516,"supplier":"House Prep"},{"name":"Herb Mayo","category":"Bulk Items","packWt":1000,"packCost":7.37,"costPerG":0.00737,"supplier":"House Prep"},{"name":"Whipped Avo","category":"Bulk Items","packWt":1000,"packCost":18.97,"costPerG":0.01897,"supplier":"House Prep"},{"name":"Kimchi","category":"Bulk Items","packWt":1000,"packCost":4.72,"costPerG":0.00472,"supplier":"House Prep"}];

// ─── CONSTANTS ────────────────────────────────────────────────────────────────
const CAT_ICONS  = {"Veg & Produce":"🥦","Meat":"🥩","Dairy":"🧀","Bakery":"🍞","Dry Goods":"🥫","Bulk Items":"📦"};
const CAT_COLORS = {"Veg & Produce":"#4a9e82","Meat":"#d4724a","Dairy":"#c8981a","Bakery":"#8b6fd4","Dry Goods":"#4a7fc4","Bulk Items":"#c46f9a"};
const SUPPLIERS  = ["Central","Dunns","Campbells/Gilmores","Saltire","Cressco","House Prep","Other"];
const ROLES      = ["Head Chef","Sous Chef","Chef de Partie","Kitchen Porter","FOH Manager","Waiter/Waitress","Bar Staff","Barista","Supervisor"];
const CONTRACT   = ["Full Time","Part Time","Zero Hours","Casual"];
const DAYS       = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
const TARGET_FOOD = 0.30;
const TARGET_LAB  = 0.28; // 28% labour target
const VAT         = 0.20;
const TABS = [
  {id:"dash",    icon:"⚡",  label:"Overview"},
  {id:"recipe",  icon:"🍽",  label:"Recipes"},
  {id:"library", icon:"🧪",  label:"Library"},
  {id:"invoice", icon:"📷",  label:"Invoices"},
  {id:"stock",   icon:"📦",  label:"Stock"},
  {id:"labour",  icon:"📊",  label:"Labour"},
  {id:"staff",   icon:"👥",  label:"Staff"},
];

// ─── HELPERS ──────────────────────────────────────────────────────────────────
const store  = { get:k=>{try{return JSON.parse(localStorage.getItem(k)||"null")}catch{return null}}, set:(k,v)=>{try{localStorage.setItem(k,JSON.stringify(v))}catch{}} };
const uid    = () => Date.now()+Math.random();
const fmtGBP = n  => `£${Number(n).toFixed(2)}`;
const cosCol = c  => c>TARGET_FOOD?"#c0392b":c>0.25?"#d68910":"#1e8449";
const cosBg  = c  => c>TARGET_FOOD?"rgba(192,57,43,0.08)":c>0.25?"rgba(214,137,16,0.08)":"rgba(30,132,73,0.08)";
const cosLbl = c  => c>TARGET_FOOD?`🔴 ${(c*100).toFixed(1)}%`:c>0.25?`🟡 ${(c*100).toFixed(1)}%`:`✅ ${(c*100).toFixed(1)}%`;
const labCol = p  => p>TARGET_LAB?"#c0392b":p>0.24?"#d68910":"#1e8449";
const initials = name => name.split(" ").map(w=>w[0]).join("").slice(0,2).toUpperCase();
const roleColor = role => ({
  "Head Chef":"#c0392b","Sous Chef":"#d4724a","Chef de Partie":"#c8981a",
  "Kitchen Porter":"#8b6fd4","FOH Manager":"#1e8449","Waiter/Waitress":"#4a7fc4",
  "Bar Staff":"#4a9e82","Barista":"#9b7230","Supervisor":"#2e7560"
}[role]||"#888");

// ─── LOGO ─────────────────────────────────────────────────────────────────────
const Logo = ({size=36}) => (
  <svg width={size} height={size} viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="#e4e0d8"/>
    <path d="M50,50 L50,5 A45,45 0 1,1 34.61,92.29 Z" fill="#4a9e82"/>
    <path d="M50,50 L32.42,91.42 A45,45 0 0,1 14.54,22.30 Z" fill="#5b7fa6"/>
    <path d="M50,50 L16.56,19.89 A45,45 0 0,1 46.08,5.17 Z" fill="#9b7230"/>
    <circle cx="50" cy="50" r="17" fill="white"/>
    <circle cx="50" cy="50" r="5"  fill="#a8cfc4"/>
  </svg>
);

// ─── GP RING ──────────────────────────────────────────────────────────────────
const GPRing = ({cos,size=68}) => {
  const gp=Math.max(0,1-cos),r=size*.38,cx=size/2,cy=size/2,sw=size*.1;
  const circ=2*Math.PI*r,dash=gp*circ,col=cosCol(cos);
  return (
    <svg width={size} height={size} style={{flexShrink:0}}>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="#e8e4de" strokeWidth={sw}/>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke={col} strokeWidth={sw}
        strokeDasharray={`${dash} ${circ}`} strokeLinecap="round"
        transform={`rotate(-90 ${cx} ${cy})`}/>
      <text x={cx} y={cy+1} textAnchor="middle" dominantBaseline="middle"
        fill={col} fontSize={size*.19} fontWeight="800" fontFamily="system-ui">{(gp*100).toFixed(0)}%</text>
      <text x={cx} y={cy+size*.17} textAnchor="middle" fill="#aaa" fontSize={size*.1} fontFamily="system-ui">GP</text>
    </svg>
  );
};

// ─── LABOUR % RING ────────────────────────────────────────────────────────────
const LabRing = ({pct,size=68,target=TARGET_LAB}) => {
  const r=size*.38,cx=size/2,cy=size/2,sw=size*.1;
  const circ=2*Math.PI*r,dash=Math.min(pct,1)*circ,col=labCol(pct);
  return (
    <svg width={size} height={size} style={{flexShrink:0}}>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="#e8e4de" strokeWidth={sw}/>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke={col} strokeWidth={sw}
        strokeDasharray={`${dash} ${circ}`} strokeLinecap="round"
        transform={`rotate(-90 ${cx} ${cy})`}/>
      {/* target marker at 28% */}
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="rgba(0,0,0,0.15)" strokeWidth={sw}
        strokeDasharray={`1 ${circ}`}
        strokeDashoffset={-(target*circ-0.5)}
        transform={`rotate(-90 ${cx} ${cy})`}/>
      <text x={cx} y={cy+1} textAnchor="middle" dominantBaseline="middle"
        fill={col} fontSize={size*.19} fontWeight="800" fontFamily="system-ui">{(pct*100).toFixed(1)}%</text>
      <text x={cx} y={cy+size*.17} textAnchor="middle" fill="#aaa" fontSize={size*.095} fontFamily="system-ui">LAB</text>
    </svg>
  );
};

let _setToast;
const toast = msg => _setToast?.({msg,id:uid()});

// ─── LINE ROW — outside App so it never remounts on render ───────────────────
function LineRow({line,library,activeDD,rSearch,ddRes,updLine,rmLine,setActiveDD,setRSearch}) {
  const ing=library.find(i=>i.id===line.ingId);
  const isOpen=activeDD===line.id;
  const cost=useMemo(()=>{
    if(!ing||!line.qty)return null;
    const q=parseFloat(line.qty)||0;
    return line.unit==="g"?q*ing.costPerG:line.unit==="kg"?q*1000*ing.costPerG:line.unit==="each"?q*ing.packCost:q*ing.costPerG;
  },[ing,line.qty,line.unit]);
  return (
    <div className="lrow">
      <div className="ipick" data-dd="true">
        <div className={`idisp${ing?" picked":""}`} onClick={()=>{setActiveDD(isOpen?null:line.id);setRSearch("");}}>
          {ing?<><div className="iname">{ing.name}</div><div className="imeta">{CAT_ICONS[ing.category]} · £{ing.costPerG.toFixed(4)}/g</div></>:<div className="iph">+ choose ingredient</div>}
        </div>
        {cost!==null&&<div className="icost">{fmtGBP(cost)}</div>}
        {isOpen&&(
          <div className="dd">
            <div className="dds"><input className="inp" style={{fontSize:12,padding:"7px 10px"}} placeholder="Search…" value={rSearch} onChange={e=>setRSearch(e.target.value)} autoFocus/></div>
            {ddRes.map(i=><div key={i.id} className="ddi" onClick={()=>{updLine(line.id,"ingId",i.id);setActiveDD(null);setRSearch("");}}><div className="ddn">{CAT_ICONS[i.category]} {i.name}</div><div className="ddm">£{i.costPerG.toFixed(4)}/g · {i.supplier}</div></div>)}
            {!ddRes.length&&<div style={{padding:12,fontSize:11,color:"var(--ink3)"}}>No results</div>}
          </div>
        )}
      </div>
      <div className="qu">
        <input className="qi" type="number" placeholder="qty" value={line.qty} onChange={e=>updLine(line.id,"qty",e.target.value)} min={0} step={0.1}/>
        <select value={line.unit} onChange={e=>updLine(line.id,"unit",e.target.value)} style={{background:"var(--bg)",border:"1.5px solid var(--border)",borderRadius:"var(--r2)",color:"var(--ink)",fontFamily:"inherit",fontSize:10,padding:"7px 3px",cursor:"pointer",outline:"none"}}>
          <option>g</option><option>kg</option><option>ml</option><option>each</option>
        </select>
      </div>
      <button className="rm2" onClick={()=>rmLine(line.id)}>×</button>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════════════════
// MAIN APP
// ═════════════════════════════════════════════════════════════════════════════
export default function App() {

  // ── AUTH ──────────────────────────────────────────────────────────────────
  const [user,setUser]         = useState(()=>store.get("fop_user"));
  const [authMode,setAuthMode] = useState("login");
  const [aForm,setAForm]       = useState({name:"",email:"",password:"",venue:""});
  const [aErr,setAErr]         = useState("");

  // ── CORE DATA ─────────────────────────────────────────────────────────────
  const [tab,setTab]           = useState("dash");
  const [library,setLibrary]   = useState(()=>store.get("fop_lib7")||SEED.map((i,x)=>({...i,id:x+1})));
  const [recipes,setRecipes]   = useState(()=>store.get("fop_rec7")||[]);
  const [invoices,setInvoices] = useState(()=>store.get("fop_inv7")||[]);
  const [stock,setStock]       = useState(()=>store.get("fop_stk7")||{});
  const [labour,setLabour]     = useState(()=>store.get("fop_lab7")||[]);
  const [staff,setStaff]       = useState(()=>store.get("fop_sta7")||[]);
  const [roster,setRoster]     = useState(()=>store.get("fop_ros7")||{}); // {YYYY-WW: {staffId:[{day,start,end,role}]}}

  // ── TOAST ─────────────────────────────────────────────────────────────────
  const [toastS,setToastS] = useState(null);
  _setToast=setToastS;
  useEffect(()=>{if(toastS){const t=setTimeout(()=>setToastS(null),3200);return()=>clearTimeout(t);}},[toastS]);

  // ── PERSIST ───────────────────────────────────────────────────────────────
  useEffect(()=>store.set("fop_lib7",library),[library]);
  useEffect(()=>store.set("fop_rec7",recipes),[recipes]);
  useEffect(()=>store.set("fop_inv7",invoices),[invoices]);
  useEffect(()=>store.set("fop_stk7",stock),[stock]);
  useEffect(()=>store.set("fop_lab7",labour),[labour]);
  useEffect(()=>store.set("fop_sta7",staff),[staff]);
  useEffect(()=>store.set("fop_ros7",roster),[roster]);

  // ── CUSTOM API ACTIONS ────────────────────────────────────────────────────
  const saveCustomApi = form => {
    if(!form.name||!form.url)return;
    const entry={...form,id:form.id||uid(),addedAt:new Date().toISOString(),status:"untested"};
    if(form.id){setCustomApis(p=>p.map(a=>a.id===form.id?entry:a));}
    else{setCustomApis(p=>[...p,entry]);}
    toast(`${form.name} saved ✓`);setCustomApiForm(null);
  };
  const delCustomApi = id=>{setCustomApis(p=>p.filter(a=>a.id!==id));toast("API removed");};
  const testCustomApi = async(api)=>{
    setTestingApi(api.id);setTestResult(p=>({...p,[api.id]:null}));
    try{
      const headers={"Content-Type":"application/json"};
      if(api.key&&api.keyHeader){headers[api.keyHeader]=api.key;}
      const res=await fetch(api.url,{method:api.method||"GET",headers,signal:AbortSignal.timeout(8000)});
      let preview="";
      try{const d=await res.json();preview=JSON.stringify(d).slice(0,140)+"…";}catch{preview=`HTTP ${res.status}`;}
      setCustomApis(p=>p.map(a=>a.id===api.id?{...a,status:res.ok?"connected":"error",lastTested:new Date().toISOString(),lastStatus:res.status}:a));
      setTestResult(p=>({...p,[api.id]:{ok:res.ok,preview,status:res.status}}));
      toast(res.ok?`${api.name} ✓`:`${api.name} returned ${res.status}`);
    }catch(e){
      setCustomApis(p=>p.map(a=>a.id===api.id?{...a,status:"error",lastTested:new Date().toISOString()}:a));
      setTestResult(p=>({...p,[api.id]:{ok:false,preview:e.message}}));
      toast(`${api.name}: ${e.message.slice(0,40)}`);
    }
    setTestingApi(null);
  };

  // ── RECIPE STATE ──────────────────────────────────────────────────────────
  const [rName,setRName]   = useState("");
  const [rSec,setRSec]     = useState("Brunch");
  const [rPrice,setRPrice] = useState("");
  const [rWaste,setRWaste] = useState(0.10);
  const [rLines,setRLines] = useState([{id:1,ingId:null,qty:"",unit:"g"}]);
  const [rSearch,setRSearch]   = useState("");
  const [activeDD,setActiveDD] = useState(null);
  const [editId,setEditId]     = useState(null);

  // ── LIB STATE ─────────────────────────────────────────────────────────────
  const [libQ,setLibQ]     = useState("");
  const [libCat,setLibCat] = useState("All");
  const [ingForm,setIngForm]   = useState(null);

  // ── INVOICE STATE ─────────────────────────────────────────────────────────
  const [invImgs,setInvImgs] = useState([]);
  const [invScan,setInvScan] = useState(false);
  const [invProg,setInvProg] = useState(0);
  const [invLbl,setInvLbl]   = useState("");
  const [invExt,setInvExt]   = useState(null);
  const [invErr,setInvErr]   = useState("");
  const invRef = useRef();

  // ── STOCK STATE ───────────────────────────────────────────────────────────
  const [stCat,setStCat] = useState("All");
  const [stQ,setStQ]     = useState("");

  // ── LABOUR STATE ──────────────────────────────────────────────────────────
  const [lDate,setLDate]   = useState(new Date().toISOString().slice(0,10));
  const [lSales,setLSales] = useState("");
  const [lFood,setLFood]   = useState("");
  const [lHours,setLHours] = useState("");
  const [lRate,setLRate]   = useState("12.50");
  const [lNote,setLNote]   = useState("");
  const [aiLoad,setAiLoad] = useState(false);
  const [aiTxt,setAiTxt]   = useState(null);

  // ── STAFF STATE ───────────────────────────────────────────────────────────
  const [staffView,setStaffView]     = useState("roster");  // roster | team | analytics | connect
  const [staffForm,setStaffForm]     = useState(null);
  const [rosterWeek,setRosterWeek]   = useState(()=>{ const d=new Date(); const mon=new Date(d.setDate(d.getDate()-d.getDay()+1)); return mon.toISOString().slice(0,10); });
  const [shiftForm,setShiftForm]     = useState(null); // {staffId,day}
  const [aiRosterLoad,setAiRosterLoad] = useState(false);
  const [aiRosterTxt,setAiRosterTxt]   = useState(null);
  const [posConnected,setPosConnected] = useState(()=>store.get("fop_pos_connected")||false);
  const [schedConnected,setSchedConnected] = useState(()=>store.get("fop_sched_connected")||false);
  const [connectingApi,setConnectingApi]   = useState(null);
  const [customApis,setCustomApis]   = useState(()=>store.get("fop_custom_apis")||[]);
  const [customApiForm,setCustomApiForm] = useState(null);
  const [testingApi,setTestingApi]   = useState(null);
  const [testResult,setTestResult]   = useState({});
  useEffect(()=>store.set("fop_custom_apis",customApis),[customApis]);

  // ── COMPUTED ──────────────────────────────────────────────────────────────
  const isDemo  = labour.length < 3;
  const dashData = useMemo(()=>{
    if(!isDemo){return [...labour].slice(0,7).reverse().map(e=>({day:new Date(e.date).toLocaleDateString("en-GB",{weekday:"short"}),sales:e.sales,labour:Math.round(e.labour),food:Math.round(e.food||0),covers:Math.round(e.sales/22)}));}
    return [{day:"Mon",sales:1840,labour:420,food:510,covers:68},{day:"Tue",sales:2100,labour:480,food:580,covers:78},{day:"Wed",sales:2650,labour:520,food:720,covers:98},{day:"Thu",sales:3100,labour:580,food:860,covers:115},{day:"Fri",sales:4200,labour:720,food:1150,covers:158},{day:"Sat",sales:4800,labour:780,food:1300,covers:180},{day:"Sun",sales:3600,labour:650,food:990,covers:135}];
  },[labour,isDemo]);
  const wkSales=dashData.reduce((a,d)=>a+d.sales,0),wkLab=dashData.reduce((a,d)=>a+d.labour,0),wkFood=dashData.reduce((a,d)=>a+d.food,0),wkGP=wkSales-wkLab-wkFood;

  const rc = useMemo(()=>{
    const base=rLines.reduce((a,l)=>{const ing=library.find(i=>i.id===l.ingId);if(!ing||!l.qty)return a;const q=parseFloat(l.qty)||0,c=l.unit==="g"?q*ing.costPerG:l.unit==="kg"?q*1000*ing.costPerG:l.unit==="each"?q*ing.packCost:q*ing.costPerG;return a+c;},0);
    const adj=base*(1+rWaste),price=parseFloat(rPrice)||0,cos=price>0?adj/price:null,min=adj/TARGET_FOOD;
    return{base,adj,cos,min,sug:min*(1+VAT),price};
  },[rLines,library,rPrice,rWaste]);

  const labStats = useMemo(()=>{if(!labour.length)return null;const e=labour.slice(0,7),ts=e.reduce((a,x)=>a+x.sales,0),tl=e.reduce((a,x)=>a+x.labour,0),tf=e.reduce((a,x)=>a+(x.food||0),0);return{ts,tl,tf,lp:tl/ts,fp:tf>0?tf/ts:null,cp:(tl+tf)/ts,n:e.length};},[labour]);

  // ── ROSTER COMPUTED ───────────────────────────────────────────────────────
  const weekRoster = useMemo(()=>roster[rosterWeek]||{},[roster,rosterWeek]);

  // Parse shift time string "HH:MM" to decimal hours
  const shiftHrs = sh => {
    const [sh1,sm1]=(sh.start||"00:00").split(":").map(Number);
    const [sh2,sm2]=(sh.end||"00:00").split(":").map(Number);
    return Math.max(0,(sh2*60+sm2)-(sh1*60+sm1))/60;
  };

  // Historical averages by day of week from labour logs
  const dayAverages = useMemo(()=>{
    const totals={Mon:{sales:0,n:0},Tue:{sales:0,n:0},Wed:{sales:0,n:0},Thu:{sales:0,n:0},Fri:{sales:0,n:0},Sat:{sales:0,n:0},Sun:{sales:0,n:0}};
    labour.forEach(e=>{
      const d=new Date(e.date);
      const day=DAYS[d.getDay()===0?6:d.getDay()-1];
      if(totals[day]){totals[day].sales+=e.sales;totals[day].n++;}
    });
    return Object.fromEntries(Object.entries(totals).map(([d,v])=>[d,{avg:v.n>0?v.sales/v.n:0,n:v.n}]));
  },[labour]);

  // Calculate roster labour cost for the week
  const rosterCost = useMemo(()=>{
    let total=0;
    staff.forEach(s=>{
      (weekRoster[s.id]||[]).forEach(sh=>{ total+=shiftHrs(sh)*s.rate; });
    });
    return total;
  },[staff,weekRoster]);

  // Per-day roster cost
  const rosterDayCost = useMemo(()=>{
    const costs={};
    DAYS.forEach(d=>costs[d]=0);
    staff.forEach(s=>{
      (weekRoster[s.id]||[]).forEach(sh=>{ costs[sh.day]=(costs[sh.day]||0)+shiftHrs(sh)*s.rate; });
    });
    return costs;
  },[staff,weekRoster]);

  const estWeekSales = useMemo(()=>DAYS.reduce((a,d)=>a+(dayAverages[d]?.avg||0),0),[dayAverages]);
  const rosterLabPct = useMemo(()=>estWeekSales>0?rosterCost/estWeekSales:null,[rosterCost,estWeekSales]);

  // Hours per staff member this week
  const staffHours = useMemo(()=>{
    const h={};
    staff.forEach(s=>{
      h[s.id]=(weekRoster[s.id]||[]).reduce((a,sh)=>a+shiftHrs(sh),0);
    });
    return h;
  },[staff,weekRoster]);

  // ── RECIPE ACTIONS ────────────────────────────────────────────────────────
  const calcLines=useCallback((lines,lib)=>lines.map(l=>{const ing=lib.find(i=>i.id===l.ingId);if(!ing||!l.qty)return{...l,cost:0};const q=parseFloat(l.qty)||0,cost=l.unit==="g"?q*ing.costPerG:l.unit==="kg"?q*1000*ing.costPerG:l.unit==="each"?q*ing.packCost:q*ing.costPerG;return{...l,cost};}),[]);
  const recalcRecipes=useCallback(nl=>{setRecipes(prev=>prev.map(r=>{const lines=calcLines(r.lines||[],nl);const base=lines.reduce((a,l)=>a+(l.cost||0),0),adj=base*(1+(r.waste||0.1)),cos=r.price>0?adj/r.price:null,min=adj/TARGET_FOOD;return{...r,lines,base,adj,cos,min,sug:min*(1+VAT)};}));},[calcLines]);

  const saveRecipe=()=>{
    if(!rName.trim()||!rLines.some(l=>l.ingId))return;
    const lines=calcLines(rLines.filter(l=>l.ingId&&l.qty),library);
    const base=lines.reduce((a,l)=>a+(l.cost||0),0),adj=base*(1+rWaste),price=parseFloat(rPrice)||0;
    const cos=price>0?adj/price:null,min=adj/TARGET_FOOD;
    const r={id:editId||uid(),name:rName,section:rSec,price,waste:rWaste,lines,base,adj,cos,min,sug:min*(1+VAT),savedAt:new Date().toISOString()};
    if(editId){setRecipes(p=>p.map(x=>x.id===editId?r:x));}else{setRecipes(p=>[r,...p]);}
    toast("Recipe saved ✓");setRName("");setRPrice("");setRWaste(0.10);setEditId(null);setRLines([{id:uid(),ingId:null,qty:"",unit:"g"}]);setTab("recipe");
  };
  const editRecipe=r=>{setRName(r.name);setRSec(r.section);setRPrice(r.price?.toString()||"");setRWaste(r.waste||0.1);setRLines(r.lines||[]);setEditId(r.id);setTab("recipe");};
  const addLine=()=>setRLines(p=>[...p,{id:uid(),ingId:null,qty:"",unit:"g"}]);
  const rmLine=id=>setRLines(p=>p.filter(l=>l.id!==id));
  const updLine=(id,f,v)=>setRLines(p=>p.map(l=>l.id===id?{...l,[f]:v}:l));

  // ── LIBRARY ACTIONS ───────────────────────────────────────────────────────
  const saveIng=form=>{if(!form.name||!form.packWt||!form.packCost)return;const cpg=parseFloat(form.packCost)/parseFloat(form.packWt);const entry={...form,packWt:parseFloat(form.packWt),packCost:parseFloat(form.packCost),costPerG:cpg};let nl;if(form.id){nl=library.map(i=>i.id===form.id?{...i,...entry}:i);}else{nl=[...library,{...entry,id:uid()}];}setLibrary(nl);recalcRecipes(nl);toast(form.id?"Price updated — recipes recalculated ✓":"Ingredient added ✓");setIngForm(null);};
  const delIng=id=>{setLibrary(p=>p.filter(i=>i.id!==id));setIngForm(null);toast("Deleted");};

  // ── INVOICE ACTIONS ───────────────────────────────────────────────────────
  const addImgs=useCallback(files=>{Array.from(files).filter(f=>f.type.startsWith("image/")).forEach(f=>{const r=new FileReader();r.onload=e=>setInvImgs(p=>[...p,{id:uid(),src:e.target.result,b64:e.target.result.split(",")[1],mime:f.type}]);r.readAsDataURL(f);});},[]);

  const scanInvoice=async()=>{
    if(!invImgs.length)return;
    setInvScan(true);setInvExt(null);setInvErr("");setInvProg(10);setInvLbl("Preparing…");
    try{
      const ib=invImgs.map(i=>({type:"image",source:{type:"base64",media_type:i.mime,data:i.b64}}));
      setInvProg(35);setInvLbl("Claude reading invoice…");
      const res=await fetch("https://api.anthropic.com/v1/messages",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:4096,system:"You are an expert at reading UK restaurant supplier invoices. Return ONLY valid JSON, no markdown.",messages:[{role:"user",content:[...ib,{type:"text",text:`Extract ALL line items. Return ONLY: {"invoice_number":"","invoice_date":"DD/MM/YYYY","supplier_name":"","invoice_total":0,"items":[{"name":"","unit":"kg","pack_wt_g":null,"qty":1,"unit_price":0,"line_total":0}]}`}]}]})});
      setInvProg(72);setInvLbl("Matching to library…");
      if(!res.ok)throw new Error(`API ${res.status}`);
      const data=await res.json();const raw=data.content?.find(b=>b.type==="text")?.text||"";
      if(!raw.trim())throw new Error("Empty response");
      let parsed;try{parsed=JSON.parse(raw.replace(/^```json?\s*/im,"").replace(/```\s*$/m,"").trim());}catch{const m=raw.match(/{[\s\S]*}/);if(!m)throw new Error("Parse failed");parsed=JSON.parse(m[0]);}
      if(!parsed.items?.length)throw new Error("No items found");
      const items=parsed.items.map((item,i)=>{const match=library.find(l=>item.name&&(l.name.toLowerCase().includes(item.name.toLowerCase().split(" ")[0])||item.name.toLowerCase().includes(l.name.toLowerCase().split(" ")[0])));return{...item,id:i,selected:true,libId:match?.id||null,libName:match?.name||null};});
      let sup=parsed.supplier_name||"Other";for(const s of SUPPLIERS){if(sup.toLowerCase().includes(s.toLowerCase())){sup=s;break;}}
      setInvExt({items,meta:{inv_number:parsed.invoice_number||`INV-${Date.now()}`,date:parsed.invoice_date||new Date().toLocaleDateString("en-GB"),supplier:sup,total:parsed.invoice_total||items.reduce((a,i)=>a+(i.line_total||0),0)}});
      setInvProg(100);setInvLbl(`✓ ${items.length} items extracted`);setTimeout(()=>setInvProg(0),2000);
    }catch(e){setInvErr(e.message);setInvProg(0);}finally{setInvScan(false);}
  };

  const saveInvoice=()=>{
    if(!invExt)return;
    const sel=invExt.items.filter(i=>i.selected);let updated=0;let nl=[...library];
    sel.forEach(item=>{if(item.libId&&item.unit_price>0&&item.pack_wt_g>0){nl=nl.map(l=>l.id===item.libId?{...l,packCost:item.unit_price,packWt:item.pack_wt_g,costPerG:item.unit_price/item.pack_wt_g}:l);updated++;}});
    setLibrary(nl);recalcRecipes(nl);
    setInvoices(p=>[{id:uid(),savedAt:new Date().toISOString(),...invExt.meta,items:sel.map(({id:_,selected:__,libId:___,libName:____,...r})=>r)},...p]);
    toast(`${sel.length} items saved · ${updated} prices updated · recipes recalculated ✓`);
    setInvExt(null);setInvImgs([]);
  };

  // ── STOCK ─────────────────────────────────────────────────────────────────
  const stockValue=useMemo(()=>library.reduce((a,i)=>a+(parseFloat(stock[i.id])||0)*i.packCost,0),[library,stock]);
  const stockCounted=useMemo(()=>library.filter(i=>(parseFloat(stock[i.id])||0)>0),[library,stock]);
  const filtStock=useMemo(()=>{const q=stQ.toLowerCase();return library.filter(i=>(stCat==="All"||i.category===stCat)&&(!q||i.name.toLowerCase().includes(q)));},[library,stCat,stQ]);

  // ── LABOUR ────────────────────────────────────────────────────────────────
  const saveLabour=()=>{
    if(!lSales||!lHours)return;
    const labCost=parseFloat(lHours)*parseFloat(lRate),sales=parseFloat(lSales),food=parseFloat(lFood)||0;
    setLabour(p=>[{id:uid(),date:lDate,sales,food,labour:labCost,hours:parseFloat(lHours),rate:parseFloat(lRate),labourPct:labCost/sales,foodPct:food>0?food/sales:null,combinedPct:(labCost+food)/sales,note:lNote},...p]);
    setLSales("");setLFood("");setLHours("");setLNote("");toast("Trading day logged ✓");
  };

  const askAI=async()=>{
    setAiLoad(true);setAiTxt(null);
    const cheap=[...library].sort((a,b)=>a.costPerG-b.costPerG).slice(0,12).map(i=>`${i.name}(£${i.costPerG.toFixed(4)}/g)`).join(", ");
    const exist=recipes.slice(0,5).map(r=>r.name).join(", ");
    try{const res=await fetch("https://api.anthropic.com/v1/messages",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:600,system:"You are a food cost consultant for a Scottish restaurant. Be specific and practical. Max 220 words.",messages:[{role:"user",content:`Cheapest ingredients: ${cheap}. Current menu: ${exist||"none"}. Suggest 3 new high-margin dishes with rough food cost %, suggested menu price, and why it works.`}]})});const d=await res.json();setAiTxt(d.content?.[0]?.text||"No response.");}catch(e){setAiTxt("AI unavailable.");}
    setAiLoad(false);
  };

  // ── STAFF ACTIONS ─────────────────────────────────────────────────────────
  const saveStaff = form => {
    if(!form.name||!form.role)return;
    const entry={...form,rate:parseFloat(form.rate)||12.50,contractHours:parseFloat(form.contractHours)||0};
    if(form.id){setStaff(p=>p.map(s=>s.id===form.id?{...s,...entry}:s));toast("Staff updated ✓");}
    else{setStaff(p=>[...p,{...entry,id:uid(),joinedAt:new Date().toISOString()}]);toast("Staff member added ✓");}
    setStaffForm(null);
  };
  const delStaff = id=>{setStaff(p=>p.filter(s=>s.id!==id));setStaffForm(null);toast("Staff member removed");};

  // Add/remove shift on roster
  const addShift = (staffId,shift)=>{
    setRoster(p=>({...p,[weekKey]:{...(p[weekKey]||{}), [staffId]:[...((p[weekKey]||{})[staffId]||[]),{...shift,id:uid()}]}}));
    setShiftForm(null);toast("Shift added ✓");
  };
  const removeShift = (staffId,shiftId)=>{
    setRoster(p=>({...p,[weekKey]:{...(p[weekKey]||{}), [staffId]:((p[weekKey]||{})[staffId]||[]).filter(s=>s.id!==shiftId)}}));
    toast("Shift removed");
  };

  // Navigate weeks
  const changeWeek = delta=>{
    const d=new Date(rosterWeek);
    d.setDate(d.getDate()+delta*7);
    setRosterWeek(d.toISOString().slice(0,10));
  };

  // Simulate API connection
  const connectApi = async(api)=>{
    setConnectingApi(api);
    await new Promise(r=>setTimeout(r,2000));
    if(api==="pos"){setPosConnected(true);store.set("fop_pos_connected",true);toast("POS connected — pulling sales data ✓");}
    if(api==="sched"){setSchedConnected(true);store.set("fop_sched_connected",true);toast("Scheduling connected — importing staff ✓");}
    setConnectingApi(null);
  };

  // AI roster builder
  const buildAIRoster = async()=>{
    if(!staff.length){toast("Add staff members first");return;}
    setAiRosterLoad(true);setAiRosterTxt(null);
    const staffSummary=staff.map(s=>`${s.name}(${s.role},£${s.rate}/hr,${s.contractHours}h/wk)`).join(", ");
    const avgsByDay=DAYS.map(d=>`${d}:£${(dayAverages[d]?.avg||0).toFixed(0)}`).join(", ");
    const busyDays=DAYS.filter(d=>dayAverages[d]?.avg>0).sort((a,b)=>(dayAverages[b]?.avg||0)-(dayAverages[a]?.avg||0)).slice(0,3).join(", ");
    try{
      const res=await fetch("https://api.anthropic.com/v1/messages",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:800,system:`You are a restaurant roster expert for a Scottish venue. The labour target is ${TARGET_LAB*100}% of sales. Be specific with shift times and costs. Max 300 words.`,messages:[{role:"user",content:`Staff: ${staffSummary}. Historical average sales by day: ${avgsByDay}. Busiest days: ${busyDays}. Estimated week sales: £${estWeekSales.toFixed(0)}. Labour budget at ${TARGET_LAB*100}%: £${(estWeekSales*TARGET_LAB).toFixed(0)}. Build the most cost-efficient roster. Suggest specific shift times for each person each day, highlight where to cut hours on quiet days, and flag any days where we risk overstaffing. Also note total estimated weekly labour cost.`}]})});
      const d=await res.json();setAiRosterTxt(d.content?.[0]?.text||"No response.");
    }catch(e){setAiRosterTxt("AI unavailable.");}
    setAiRosterLoad(false);
  };

  // ── AUTH ACTIONS ──────────────────────────────────────────────────────────
  const handleAuth=()=>{
    setAErr("");if(!aForm.email||!aForm.password){setAErr("Please fill in all fields");return;}
    if(authMode==="register"&&!aForm.name){setAErr("Please enter your name");return;}
    const users=store.get("fop_users")||[];
    if(authMode==="register"){if(users.find(u=>u.email===aForm.email)){setAErr("Email already registered");return;}const nu={id:uid(),name:aForm.name,email:aForm.email,password:aForm.password,venue:aForm.venue||"My Venue",createdAt:new Date().toISOString()};store.set("fop_users",[...users,nu]);store.set("fop_user",nu);setUser(nu);toast(`Welcome, ${nu.name.split(" ")[0]}! 🎉`);}
    else{const u=users.find(u=>u.email===aForm.email&&u.password===aForm.password);if(!u){setAErr("Email or password incorrect");return;}store.set("fop_user",u);setUser(u);toast(`Welcome back, ${u.name.split(" ")[0]}! 👋`);}
  };
  const logout=()=>{store.set("fop_user",null);setUser(null);};

  // ── FILTERED ──────────────────────────────────────────────────────────────
  const filtLib=useMemo(()=>{const q=libQ.toLowerCase();return library.filter(i=>(libCat==="All"||i.category===libCat)&&(!q||i.name.toLowerCase().includes(q)));},[library,libQ,libCat]);
  const ddRes=useMemo(()=>{if(!rSearch)return library.slice(0,12);const q=rSearch.toLowerCase();return library.filter(i=>i.name.toLowerCase().includes(q)).slice(0,10);},[library,rSearch]);

  // ─────────────────────────────────────────────────────────────────────────
  // CSS
  // ─────────────────────────────────────────────────────────────────────────
  const css=`
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --bg:#f0ede8;--bg2:#e8e4de;--white:#ffffff;--card:#ffffff;
      --border:#ddd9d2;--border2:#ccc8c0;
      --ink:#1a1a1a;--ink2:#4a4a4a;--ink3:#888880;--ink4:#b8b4ae;
      --teal:#3d8b72;--teal2:#2e7560;--teal-dim:rgba(61,139,114,0.1);
      --green:#1e7a40;--red:#c0392b;--amber:#b8860b;--blue:#2c6fa8;
      --shadow:0 1px 4px rgba(0,0,0,0.08);--shadow2:0 4px 16px rgba(0,0,0,0.1);
      --r:16px;--r2:12px;--r3:8px;
    }
    body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;font-size:14px}
    ::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
    @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes slideIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
    .fade{animation:fadeUp .2s ease}

    /* LOGIN */
    .lw{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
    .lc{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:36px 28px;width:100%;max-width:380px;box-shadow:var(--shadow2)}
    .ll{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
    .lw-mark{font-size:18px;font-weight:800;color:var(--ink)}
    .lw-mark span{color:var(--teal)}
    .lw-sub{font-size:11px;color:var(--ink3);text-align:center;margin-bottom:24px}
    .l-tabs{display:flex;background:var(--bg);border-radius:var(--r3);padding:3px;gap:3px;margin-bottom:22px;border:1px solid var(--border)}
    .l-tab{flex:1;padding:8px;border:none;border-radius:6px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:var(--ink3);transition:all .15s}
    .l-tab.on{background:var(--teal);color:white}

    /* SHELL */
    .root{display:flex;flex-direction:column;min-height:100vh;max-width:480px;margin:0 auto;padding-bottom:76px;background:var(--bg)}

    /* HEADER */
    .hdr{background:var(--white);border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}
    .hbrand{display:flex;align-items:center;gap:10px}
    .hname{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.2px}
    .hsub{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-top:1px}
    .hright{display:flex;align-items:center;gap:8px}
    .hstats{font-size:10px;color:var(--ink3);text-align:right;line-height:1.8}
    .lo-btn{background:transparent;border:1px solid var(--border2);border-radius:var(--r3);color:var(--ink3);font-size:10px;padding:5px 10px;cursor:pointer;font-family:inherit;transition:all .15s}
    .lo-btn:hover{border-color:var(--red);color:var(--red)}

    /* NAV */
    .nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--white);border-top:1px solid var(--border);display:flex;z-index:100;padding:4px 0 env(safe-area-inset-bottom);box-shadow:0 -2px 12px rgba(0,0,0,0.06)}
    .nb{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;cursor:pointer;border:none;background:transparent;color:var(--ink4);font-family:inherit;font-size:8.5px;font-weight:700;letter-spacing:.02em;transition:color .15s;-webkit-tap-highlight-color:transparent}
    .nb.on{color:var(--teal)}
    .nb .ico{font-size:18px;line-height:1.2}

    /* PAGE */
    .pg{padding:18px 16px;flex:1}
    .pt{font-size:26px;font-weight:900;letter-spacing:-.5px;color:var(--ink);margin-bottom:2px}
    .ps{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:16px}

    /* CARDS */
    .card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
    .card.teal{border-color:rgba(61,139,114,.25);background:rgba(61,139,114,.04)}
    .card.red{border-color:rgba(192,57,43,.2);background:rgba(192,57,43,.04)}
    .card.blue{border-color:rgba(44,111,168,.2);background:rgba(44,111,168,.04)}
    .card.amber{border-color:rgba(184,134,11,.2);background:rgba(184,134,11,.04)}
    .cl{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px;display:flex;align-items:center;gap:6px}
    .cl::after{content:'';flex:1;height:1px;background:var(--border)}

    /* INPUTS */
    .inp{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r2);color:var(--ink);font-family:inherit;font-size:14px;padding:11px 13px;outline:none;transition:border-color .15s;-webkit-appearance:none}
    .inp:focus{border-color:var(--teal);background:var(--white)}
    .inp::placeholder{color:var(--ink4)}
    .sel{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r2);color:var(--ink);font-family:inherit;font-size:13px;padding:10px 12px;cursor:pointer;outline:none;-webkit-appearance:none}
    .sel:focus{border-color:var(--teal)}

    /* BUTTONS */
    .btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:var(--r2);cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;padding:11px 18px;transition:all .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
    .bteal{background:linear-gradient(135deg,var(--teal),var(--teal2));color:white;box-shadow:0 2px 8px rgba(61,139,114,.3)}.bteal:hover{box-shadow:0 4px 16px rgba(61,139,114,.4);transform:translateY(-1px)}
    .bghost{background:transparent;color:var(--ink2);border:1.5px solid var(--border2)}.bghost:hover{border-color:var(--teal);color:var(--teal)}
    .bred{background:rgba(192,57,43,.06);color:var(--red);border:1.5px solid rgba(192,57,43,.2)}.bred:hover{background:rgba(192,57,43,.12)}
    .bai{background:linear-gradient(135deg,#5b6ef0,#8b5cf6);color:#fff;border:none}
    .btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
    .btn-full{width:100%;justify-content:center;padding:13px}
    .btn-sm{padding:7px 13px;font-size:12px}
    .btn-xs{padding:4px 10px;font-size:11px}

    /* KPIs */
    .kr{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
    .kr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px}
    .kpi{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:14px;box-shadow:var(--shadow)}
    .kl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-bottom:4px}
    .kv{font-size:22px;font-weight:900;letter-spacing:-.5px;color:var(--ink)}
    .kv.g{color:var(--green)}.kv.r{color:var(--red)}.kv.a{color:var(--amber)}.kv.t{color:var(--teal)}.kv.b{color:var(--blue)}
    .ks{font-size:9px;color:var(--ink3);margin-top:2px}

    /* FORM */
    .fr{display:flex;gap:9px;margin-bottom:10px}
    .fc{flex:1}
    .fl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin-bottom:5px}

    /* RECIPE LINE */
    .lrow{display:flex;gap:6px;align-items:flex-start;margin-bottom:9px}
    .ipick{flex:1;position:relative}
    .idisp{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r2);padding:9px 12px;cursor:pointer;min-height:42px;display:flex;flex-direction:column;justify-content:center;transition:border-color .15s}
    .idisp.picked{border-color:rgba(61,139,114,.4);background:rgba(61,139,114,.04)}
    .iname{font-size:12px;font-weight:700;color:var(--ink)}
    .imeta{font-size:9px;color:var(--ink3);margin-top:1px}
    .iph{font-size:12px;color:var(--ink4);font-style:italic}
    .icost{font-size:9px;color:var(--teal);font-weight:700;margin-top:3px;padding-left:2px}
    .dd{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--white);border:1.5px solid var(--border2);border-radius:var(--r2);z-index:300;max-height:220px;overflow-y:auto;box-shadow:var(--shadow2)}
    .dds{padding:8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--white)}
    .ddi{padding:10px 13px;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.04);transition:background .1s}
    .ddi:hover{background:var(--bg)}.ddi:active{background:var(--bg2)}
    .ddn{font-size:12px;font-weight:700;color:var(--ink)}
    .ddm{font-size:9px;color:var(--ink3);margin-top:1px}
    .qu{display:flex;gap:4px;width:100px;flex-shrink:0}
    .qi{width:50px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r2);color:var(--ink);font-size:12px;padding:8px 4px;text-align:center;outline:none}
    .qi:focus{border-color:var(--teal)}
    .rm2{width:30px;height:30px;margin-top:6px;background:transparent;border:1.5px solid var(--border);border-radius:var(--r3);color:var(--ink3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:all .15s}
    .rm2:active{border-color:var(--red);color:var(--red)}

    /* SUMMARY */
    .sum{background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);padding:13px;margin-bottom:12px}
    .sr{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px;border-bottom:1px solid var(--border)}
    .sr:last-child{border:none;padding-top:6px;margin-top:3px}
    .sl{color:var(--ink2)}.sv{font-weight:700;color:var(--ink)}
    .mbar{height:4px;border-radius:2px;background:var(--bg2);margin-top:8px;overflow:hidden}
    .mf{height:100%;border-radius:2px;transition:width .4s}

    /* GP BAR */
    .gpbar{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:13px;display:flex;align-items:center;gap:12px;margin-bottom:12px;box-shadow:var(--shadow)}

    /* RECIPE CARDS */
    .rc{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px;box-shadow:var(--shadow)}
    .rn{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:2px}
    .rm3{font-size:10px;color:var(--ink3);margin-bottom:9px}
    .rs{display:flex;gap:5px;flex-wrap:wrap}
    .rst{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:3px 8px;font-size:10px;font-weight:600;color:var(--ink2)}

    /* LIBRARY */
    .li{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);margin-bottom:6px;cursor:pointer;transition:border-color .15s;box-shadow:var(--shadow)}
    .ldot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
    .linfo{flex:1;min-width:0}
    .lname{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ldet{font-size:10px;color:var(--ink3);margin-top:1px}
    .lcost{font-size:11px;font-weight:700;color:var(--teal);text-align:right;flex-shrink:0}

    /* CAT TABS */
    .cts{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px;padding-bottom:2px}
    .cts::-webkit-scrollbar{display:none}
    .ct{flex-shrink:0;padding:6px 12px;border-radius:20px;font-size:10px;font-weight:700;cursor:pointer;border:1.5px solid var(--border);font-family:inherit;transition:all .12s;background:var(--white);color:var(--ink3);-webkit-tap-highlight-color:transparent}
    .ct.on{color:white;border-color:transparent}

    /* SUB TABS */
    .stabs{display:flex;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:3px;gap:3px;margin-bottom:16px;box-shadow:var(--shadow)}
    .stab{flex:1;padding:7px 4px;border:none;border-radius:var(--r3);font-family:inherit;font-size:10px;font-weight:700;cursor:pointer;background:transparent;color:var(--ink3);transition:all .15s;text-align:center;-webkit-tap-highlight-color:transparent}
    .stab.on{background:var(--teal);color:white}

    /* STOCK */
    .si{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);margin-bottom:6px;box-shadow:var(--shadow)}
    .si.counted{border-color:rgba(61,139,114,.3);background:rgba(61,139,114,.04)}
    .sqi{width:54px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r3);color:var(--ink);font-size:13px;padding:6px 4px;text-align:center;outline:none;-webkit-appearance:none}
    .sqi:focus{border-color:var(--teal)}

    /* INVOICE */
    .dz{border:2px dashed var(--border2);border-radius:var(--r);padding:28px 16px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg)}
    .dz.ov{border-color:var(--teal);background:rgba(61,139,114,.04)}
    .th-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
    .th{width:60px;height:60px;border-radius:var(--r3);overflow:hidden;border:1px solid var(--border);cursor:pointer}
    .th img{width:100%;height:100%;object-fit:cover}
    .pw{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:11px 13px;margin:10px 0;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow)}
    .pb{flex:1;height:4px;background:var(--bg2);border-radius:2px;overflow:hidden}
    .pbf{height:100%;background:linear-gradient(90deg,var(--teal),#4ade80);border-radius:2px;transition:width .5s}
    .plbl{font-size:10px;color:var(--ink3);min-width:140px;text-align:right}
    .itbl{width:100%;border-collapse:collapse;font-size:11px}
    .itbl th{padding:5px 7px;text-align:left;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);background:var(--bg);border-bottom:1px solid var(--border)}
    .itbl td{padding:5px 7px;border-bottom:1px solid var(--border)}
    .mk{background:rgba(30,122,64,.1);color:var(--green);font-size:9px;padding:2px 6px;border-radius:3px;font-weight:700}
    .mn{background:rgba(192,57,43,.08);color:var(--red);font-size:9px;padding:2px 6px;border-radius:3px}

    /* LABOUR */
    .ld{background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:11px 13px;margin-bottom:7px;box-shadow:var(--shadow)}
    .ldate{font-size:10px;color:var(--ink3);margin-bottom:7px;font-weight:600}
    .lpills{display:flex;gap:5px;flex-wrap:wrap}
    .lpill{border-radius:5px;padding:3px 9px;font-size:10px;font-weight:700;border:1px solid transparent}

    /* STAFF CARD */
    .scard{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px;box-shadow:var(--shadow);transition:box-shadow .15s}
    .scard:hover{box-shadow:var(--shadow2)}
    .sav{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:white;flex-shrink:0}
    .sname{font-size:15px;font-weight:800;color:var(--ink)}
    .srole{font-size:11px;font-weight:600;margin-top:1px}
    .spills{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
    .spill{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:3px 8px;font-size:10px;font-weight:600;color:var(--ink2)}

    /* ROSTER GRID */
    .roster-grid{overflow-x:auto;margin-bottom:12px}
    .rg-table{width:100%;border-collapse:separate;border-spacing:0;min-width:420px}
    .rg-th{padding:8px 6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);text-align:center;background:var(--bg);border-bottom:2px solid var(--border);position:sticky;top:0}
    .rg-td{padding:4px;vertical-align:top;border-bottom:1px solid var(--border);min-width:52px}
    .rg-name{padding:8px 10px;font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;border-bottom:1px solid var(--border);min-width:90px;background:var(--bg)}
    .shift-chip{background:var(--teal);color:white;border-radius:6px;padding:3px 6px;font-size:9px;font-weight:700;margin-bottom:3px;display:flex;justify-content:space-between;align-items:center;gap:4px;line-height:1.3}
    .shift-del{background:transparent;border:none;color:rgba(255,255,255,0.7);cursor:pointer;font-size:11px;padding:0;line-height:1}
    .add-shift-btn{width:100%;background:var(--bg);border:1.5px dashed var(--border2);border-radius:6px;color:var(--ink4);font-size:10px;font-weight:600;padding:4px;cursor:pointer;font-family:inherit;transition:all .15s}
    .add-shift-btn:hover{border-color:var(--teal);color:var(--teal)}

    /* WEEK NAV */
    .week-nav{display:flex;align-items:center;justify-content:space-between;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);padding:10px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
    .week-label{font-size:13px;font-weight:800;color:var(--ink)}
    .week-btn{background:transparent;border:1px solid var(--border);border-radius:var(--r3);padding:5px 12px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;color:var(--ink2);transition:all .15s}
    .week-btn:hover{border-color:var(--teal);color:var(--teal)}

    /* DAY ACTIVITY BARS */
    .day-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px}
    .day-bar-wrap{text-align:center}
    .day-bar-outer{height:48px;background:var(--bg);border-radius:4px;display:flex;align-items:flex-end;overflow:hidden;margin-bottom:3px}
    .day-bar-inner{width:100%;border-radius:4px;transition:height .4s}
    .day-bar-lbl{font-size:8px;font-weight:700;color:var(--ink3)}
    .day-bar-val{font-size:8px;color:var(--ink4)}

    /* CONNECT APIS */
    .api-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);margin-bottom:8px;box-shadow:var(--shadow)}
    .api-icon{font-size:24px;flex-shrink:0}
    .api-name{font-size:13px;font-weight:800;color:var(--ink)}
    .api-desc{font-size:11px;color:var(--ink3);margin-top:1px}
    .api-status-ok{font-size:9px;font-weight:700;color:var(--green);background:rgba(30,122,64,.1);border-radius:4px;padding:2px 8px}

    /* AI */
    .aibox{background:linear-gradient(135deg,rgba(91,110,240,.06),rgba(139,92,246,.06));border:1px solid rgba(139,92,246,.2);border-radius:var(--r);padding:13px;margin-top:10px}
    .aititle{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7c3aed;margin-bottom:8px}
    .aitxt{font-size:12px;line-height:1.7;color:var(--ink2);white-space:pre-wrap}

    /* ALERTS */
    .alert{border-radius:var(--r2);padding:10px 13px;font-size:11px;margin-bottom:10px;font-weight:500}
    .alert.ok{background:rgba(30,122,64,.07);border:1px solid rgba(30,122,64,.2);color:var(--green)}
    .alert.warn{background:rgba(184,134,11,.07);border:1px solid rgba(184,134,11,.2);color:var(--amber)}
    .alert.err{background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.2);color:var(--red)}
    .alert.info{background:rgba(44,111,168,.07);border:1px solid rgba(44,111,168,.2);color:var(--blue)}

    /* TOAST */
    .toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--teal);color:white;font-family:inherit;font-weight:700;font-size:13px;padding:10px 22px;border-radius:20px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.15);white-space:nowrap;animation:slideIn .25s ease}

    /* MISC */
    .spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite}
    .spin-dark{width:13px;height:13px;border:2px solid rgba(0,0,0,.1);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite}
    .empty{text-align:center;padding:40px 16px;color:var(--ink3)}
    .empty-ico{font-size:36px;margin-bottom:10px;opacity:.3}
    .demo-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(44,111,168,.08);border:1px solid rgba(44,111,168,.2);border-radius:6px;padding:4px 10px;font-size:10px;color:var(--blue);font-weight:700;margin-bottom:12px}
    .chip{display:inline-flex;align-items:center;gap:4px;border-radius:5px;padding:2px 8px;font-size:10px;font-weight:700}
  `;

  // ── LINE ROW ──────────────────────────────────────────────────────────────
  // ─────────────────────────────────────────────────────────────────────────
  // LOGIN
  // ─────────────────────────────────────────────────────────────────────────
  if(!user) return (
    <><style>{css}</style>
    <div className="lw"><div className="lc">
      <div className="ll"><Logo size={40}/><div><div className="lw-mark">Lost Shore<span> · Food Op Pro</span></div></div></div>
      <div className="lw-sub">Kitchen Intelligence Platform</div>
      <div className="l-tabs">
        <button className={`l-tab${authMode==="login"?" on":""}`} onClick={()=>setAuthMode("login")}>Sign In</button>
        <button className={`l-tab${authMode==="register"?" on":""}`} onClick={()=>setAuthMode("register")}>Create Account</button>
      </div>
      {authMode==="register"&&<>
        <div style={{marginBottom:9}}><div className="fl">Your Name</div><input className="inp" placeholder="Jason Smith" value={aForm.name} onChange={e=>setAForm(p=>({...p,name:e.target.value}))}/></div>
        <div style={{marginBottom:9}}><div className="fl">Venue Name</div><input className="inp" placeholder="Lost Shore" value={aForm.venue} onChange={e=>setAForm(p=>({...p,venue:e.target.value}))}/></div>
      </>}
      <div style={{marginBottom:9}}><div className="fl">Email</div><input className="inp" type="email" placeholder="hello@yourplace.co.uk" value={aForm.email} onChange={e=>setAForm(p=>({...p,email:e.target.value}))}/></div>
      <div style={{marginBottom:16}}><div className="fl">Password</div><input className="inp" type="password" placeholder="••••••••" value={aForm.password} onChange={e=>setAForm(p=>({...p,password:e.target.value}))} onKeyDown={e=>e.key==="Enter"&&handleAuth()}/></div>
      {aErr&&<div className="alert err" style={{marginBottom:12}}>{aErr}</div>}
      <button className="btn bteal btn-full" onClick={handleAuth}>{authMode==="login"?"Sign In →":"Create Account →"}</button>
      <div style={{textAlign:"center",marginTop:14,fontSize:11,color:"var(--ink3)"}}>
        {authMode==="login"?"No account? ":"Already registered? "}
        <span style={{color:"var(--teal)",cursor:"pointer",fontWeight:700}} onClick={()=>setAuthMode(authMode==="login"?"register":"login")}>{authMode==="login"?"Create one free":"Sign in"}</span>
      </div>
    </div></div></>
  );

  // ─────────────────────────────────────────────────────────────────────────
  // MAIN
  // ─────────────────────────────────────────────────────────────────────────
  return (
    <><style>{css}</style>
    {toastS&&<div key={toastS.id} className="toast">{toastS.msg}</div>}

    <div className="root" onClick={e=>{if(!e.target.closest('[data-dd]'))setActiveDD(null);}}>

      {/* HEADER */}
      <div className="hdr">
        <div className="hbrand">
          <Logo size={38}/>
          <div><div className="hname">{user.venue||"Lost Shore"}</div><div className="hsub">Restaurant · Food Op Pro</div></div>
        </div>
        <div className="hright">
          <div className="hstats"><div>{library.length} ingredients</div><div>{recipes.length} recipes</div></div>
          <button className="lo-btn" onClick={logout}>Sign out</button>
        </div>
      </div>

      {/* ══════ OVERVIEW ══════ */}
      {tab==="dash"&&(
        <div className="pg fade">
          <div className="pt">Overview</div>
          <div className="ps">Weekly Performance</div>
          {isDemo&&<div className="demo-tag">📊 Demo data — log 3+ trading days for live charts</div>}
          <div className="kr">
            <div className="kpi" style={{borderColor:"rgba(61,139,114,.2)",background:"rgba(61,139,114,.04)"}}><div className="kl">Week Sales</div><div className="kv t">{fmtGBP(wkSales)}</div><div className="ks">{dashData.reduce((a,d)=>a+d.covers,0)} covers</div></div>
            <div className="kpi" style={{borderColor:"rgba(30,122,64,.2)",background:"rgba(30,122,64,.04)"}}><div className="kl">Gross Profit</div><div className="kv g">{fmtGBP(wkGP)}</div><div className="ks">{((wkGP/wkSales)*100).toFixed(1)}% GP</div></div>
          </div>
          <div className="kr3">
            <div className="kpi"><div className="kl">Labour %</div><div className={`kv ${wkLab/wkSales>TARGET_LAB?"r":wkLab/wkSales>0.24?"a":"g"}`}>{(wkLab/wkSales*100).toFixed(1)}%</div><div className="ks">&lt;{TARGET_LAB*100}% target</div></div>
            <div className="kpi"><div className="kl">Food %</div><div className={`kv ${wkFood/wkSales>TARGET_FOOD?"r":wkFood/wkSales>0.25?"a":"g"}`}>{(wkFood/wkSales*100).toFixed(1)}%</div><div className="ks">&lt;{TARGET_FOOD*100}% target</div></div>
            <div className="kpi"><div className="kl">Combined</div><div className={`kv ${(wkLab+wkFood)/wkSales>0.56?"r":(wkLab+wkFood)/wkSales>0.52?"a":"g"}`}>{((wkLab+wkFood)/wkSales*100).toFixed(1)}%</div><div className="ks">&lt;56%</div></div>
          </div>
          <div className="card">
            <div className="cl">Sales vs Labour vs Food</div>
            <ResponsiveContainer width="100%" height={155}>
              <AreaChart data={dashData} margin={{top:4,right:4,left:-24,bottom:0}}>
                <defs>
                  <linearGradient id="gs" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#3d8b72" stopOpacity={0.2}/><stop offset="95%" stopColor="#3d8b72" stopOpacity={0}/></linearGradient>
                  <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#2c6fa8" stopOpacity={0.2}/><stop offset="95%" stopColor="#2c6fa8" stopOpacity={0}/></linearGradient>
                  <linearGradient id="gf" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#d4724a" stopOpacity={0.2}/><stop offset="95%" stopColor="#d4724a" stopOpacity={0}/></linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.05)"/>
                <XAxis dataKey="day" tick={{fill:"#888",fontSize:9}} axisLine={false} tickLine={false}/>
                <YAxis tick={{fill:"#888",fontSize:9}} axisLine={false} tickLine={false} tickFormatter={v=>`£${(v/1000).toFixed(1)}k`}/>
                <Tooltip contentStyle={{background:"white",border:"1px solid var(--border)",borderRadius:10,fontSize:11}} formatter={(v,n)=>[`£${v.toLocaleString()}`,n]}/>
                <Area type="monotone" dataKey="sales"  stroke="#3d8b72" strokeWidth={2} fill="url(#gs)" name="Sales"/>
                <Area type="monotone" dataKey="labour" stroke="#2c6fa8" strokeWidth={2} fill="url(#gl)" name="Labour"/>
                <Area type="monotone" dataKey="food"   stroke="#d4724a" strokeWidth={2} fill="url(#gf)" name="Food"/>
              </AreaChart>
            </ResponsiveContainer>
          </div>
          <div className="card">
            <div className="cl">Covers per Day</div>
            <ResponsiveContainer width="100%" height={110}>
              <BarChart data={dashData} margin={{top:4,right:4,left:-28,bottom:0}}>
                <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.05)"/>
                <XAxis dataKey="day" tick={{fill:"#888",fontSize:9}} axisLine={false} tickLine={false}/>
                <YAxis tick={{fill:"#888",fontSize:9}} axisLine={false} tickLine={false}/>
                <Tooltip contentStyle={{background:"white",border:"1px solid var(--border)",borderRadius:10,fontSize:11}} formatter={v=>[v,"Covers"]}/>
                <Bar dataKey="covers" fill="#3d8b72" radius={[5,5,0,0]}/>
              </BarChart>
            </ResponsiveContainer>
          </div>
          {labour.length>=3&&<div className="card">
            <div className="cl">Labour % vs {TARGET_LAB*100}% Target</div>
            <ResponsiveContainer width="100%" height={110}>
              <LineChart data={[...labour].slice(0,10).reverse().map(e=>({day:e.date.slice(5),lab:+(e.labourPct*100).toFixed(1),food:e.foodPct?+(e.foodPct*100).toFixed(1):null}))} margin={{top:4,right:4,left:-28,bottom:0}}>
                <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.05)"/>
                <XAxis dataKey="day" tick={{fill:"#888",fontSize:9}} axisLine={false} tickLine={false}/>
                <YAxis tick={{fill:"#888",fontSize:9}} axisLine={false} tickLine={false} tickFormatter={v=>`${v}%`}/>
                <Tooltip contentStyle={{background:"white",border:"1px solid var(--border)",borderRadius:10,fontSize:11}} formatter={v=>[`${v}%`]}/>
                <ReferenceLine y={TARGET_LAB*100} stroke="rgba(192,57,43,0.45)" strokeDasharray="4 4" label={{value:`${TARGET_LAB*100}%`,position:"right",fontSize:8,fill:"var(--red)"}}/>
                <Line type="monotone" dataKey="lab" stroke="#2c6fa8" strokeWidth={2} dot={false} name="Labour %"/>
                {labour.some(e=>e.foodPct)&&<Line type="monotone" dataKey="food" stroke="#d4724a" strokeWidth={2} dot={false} name="Food %"/>}
              </LineChart>
            </ResponsiveContainer>
          </div>}
          {recipes.filter(r=>r.cos>TARGET_FOOD).length>0&&<div className="card red"><div className="cl" style={{color:"var(--red)"}}>⚠ Dishes Over {TARGET_FOOD*100}% Food Cost</div>{recipes.filter(r=>r.cos>TARGET_FOOD).map(r=><div key={r.id} style={{display:"flex",justifyContent:"space-between",fontSize:12,padding:"5px 0",borderBottom:"1px solid var(--border)"}}><span style={{fontWeight:600}}>{r.name}</span><span style={{color:"var(--red)",fontWeight:700}}>{(r.cos*100).toFixed(1)}% — raise to {fmtGBP(r.min)}</span></div>)}</div>}
          {!labour.length&&<button className="btn bteal btn-full" style={{marginTop:4}} onClick={()=>setTab("labour")}>Log first day →</button>}
          <div className="card blue" style={{marginTop:4}}>
            <div className="cl" style={{color:"var(--blue)"}}>🔗 Connect Live Data</div>
            <p style={{fontSize:12,color:"var(--ink2)",marginBottom:12,lineHeight:1.6}}>Link your POS and scheduling platform in the Staff tab for live data across the whole app.</p>
            <button className="btn bghost btn-sm" onClick={()=>setTab("staff")}>Go to Staff & Roster →</button>
          </div>
        </div>
      )}

      {/* ══════ RECIPES ══════ */}
      {tab==="recipe"&&(
        <div className="pg fade">
          <div className="pt">{editId?"Edit Recipe":"Recipes"}</div>
          <div className="ps">Cost it live · see GP instantly</div>
          {recipes.length>0&&<div style={{marginBottom:16}}>
            <div className="cl">Saved ({recipes.length})</div>
            {recipes.map(r=>{const col=r.cos?cosCol(r.cos):"var(--ink3)",bg=r.cos?cosBg(r.cos):"transparent";return(
              <div key={r.id} className="rc">
                <div style={{display:"flex",alignItems:"flex-start",gap:10}}>
                  <div style={{flex:1}}>
                    <div className="rn">{r.name}</div>
                    <div className="rm3">{r.section} · {new Date(r.savedAt).toLocaleDateString("en-GB")}</div>
                    <div className="rs">
                      <div className="rst" style={{color:"var(--teal)"}}>{fmtGBP(r.adj)} cost</div>
                      {r.price>0&&<div className="rst">{fmtGBP(r.price)} menu</div>}
                      {r.cos!==null&&<div className="rst" style={{background:bg,color:col,borderColor:col+"33"}}>{cosLbl(r.cos)}</div>}
                    </div>
                    {r.cos>TARGET_FOOD&&<div style={{fontSize:10,color:"var(--red)",fontWeight:600,marginTop:5}}>Raise to {fmtGBP(r.min)} ex-VAT · {fmtGBP(r.sug)} inc VAT</div>}
                  </div>
                  {r.cos!==null&&<GPRing cos={r.cos} size={58}/>}
                </div>
                <div style={{display:"flex",gap:6,marginTop:10}}>
                  <button className="btn bghost btn-xs" onClick={()=>editRecipe(r)}>✏ Edit</button>
                  <button className="btn bred btn-xs" onClick={()=>{if(window.confirm("Delete?"))setRecipes(p=>p.filter(x=>x.id!==r.id));}}>✕ Delete</button>
                </div>
              </div>
            );})}
            <div style={{height:1,background:"var(--border)",margin:"16px 0"}}/>
          </div>}
          <div className="card teal">
            <div className="cl">{editId?"Editing":"New Recipe"}</div>
            <input className="inp" placeholder="Dish name…" value={rName} onChange={e=>setRName(e.target.value)} style={{marginBottom:9}}/>
            <div className="fr">
              <div className="fc"><div className="fl">Section</div><select className="sel" value={rSec} onChange={e=>setRSec(e.target.value)}>{["Brunch","Breakfast","All Day","Lost Deli","Lost Taco","Lost Flock","Quiz Night","Coffee Bar","Specials"].map(s=><option key={s}>{s}</option>)}</select></div>
              <div className="fc"><div className="fl">Menu Price (£ ex-VAT)</div><input className="inp" type="number" placeholder="0.00" value={rPrice} onChange={e=>setRPrice(e.target.value)} step={0.5} min={0}/></div>
            </div>
          </div>
          {rc.adj>0&&rPrice&&<div className="gpbar" style={{borderColor:cosCol(rc.cos)+"44",background:cosBg(rc.cos)}}><GPRing cos={rc.cos||0} size={64}/><div style={{flex:1}}><div style={{fontSize:15,fontWeight:800,color:cosCol(rc.cos)}}>{rc.cos!==null?`${(rc.cos*100).toFixed(1)}% food cost`:fmtGBP(rc.adj)+" cost"}</div><div style={{fontSize:11,color:"var(--ink3)",marginTop:2}}>{rc.cos!==null?`GP ${fmtGBP(rc.price-rc.adj)} · Min ${fmtGBP(rc.min)} ex-VAT`:"Set menu price to see GP%"}</div>{rc.cos!==null&&rc.cos>TARGET_FOOD&&<div style={{fontSize:10,color:"var(--red)",fontWeight:600,marginTop:2}}>⚠ Raise to {fmtGBP(rc.min)} · {fmtGBP(rc.sug)} inc VAT</div>}</div></div>}
          <div className="card" data-dd="true">
            <div className="cl">Ingredients</div>
            {rLines.map(l=><LineRow key={l.id} line={l} library={library} activeDD={activeDD} rSearch={rSearch} ddRes={ddRes} updLine={updLine} rmLine={rmLine} setActiveDD={setActiveDD} setRSearch={setRSearch}/>)}
            <button className="btn bghost btn-full" style={{marginTop:4}} onClick={addLine}>+ Add Ingredient</button>
          </div>
          <div className="card">
            <div className="cl">Waste Factor</div>
            <div style={{display:"flex",alignItems:"center",gap:10}}>
              <span style={{fontSize:11,color:"var(--ink3)"}}>Prep waste</span>
              <input type="range" min={0} max={0.30} step={0.01} value={rWaste} onChange={e=>setRWaste(parseFloat(e.target.value))} style={{flex:1,accentColor:"var(--teal)"}}/>
              <span style={{fontSize:13,fontWeight:800,color:"var(--teal)",width:34}}>{(rWaste*100).toFixed(0)}%</span>
            </div>
          </div>
          {rc.adj>0&&<div className="sum">
            <div className="sr"><span className="sl">Base cost</span><span className="sv">{fmtGBP(rc.base)}</span></div>
            <div className="sr"><span className="sl">+{(rWaste*100).toFixed(0)}% waste</span><span className="sv">{fmtGBP(rc.adj)}</span></div>
            {rc.price>0&&<div className="sr"><span className="sl">GP per cover</span><span className="sv" style={{color:"var(--green)"}}>{fmtGBP(rc.price-rc.adj)}</span></div>}
            {rc.cos!==null&&<><div className="sr"><span className="sl">COS / GP</span><span style={{fontWeight:800,color:cosCol(rc.cos)}}>{(rc.cos*100).toFixed(1)}% / {((1-rc.cos)*100).toFixed(1)}%</span></div><div className="mbar"><div className="mf" style={{width:`${Math.min(rc.cos*100,100)}%`,background:cosCol(rc.cos)}}/></div></>}
          </div>}
          <div style={{display:"flex",gap:8}}>
            <button className="btn bteal" style={{flex:1,justifyContent:"center",padding:13}} onClick={saveRecipe} disabled={!rName.trim()||!rLines.some(l=>l.ingId&&l.qty)}>💾 {editId?"Update":"Save"} Recipe</button>
            {editId&&<button className="btn bred" onClick={()=>{setEditId(null);setRName("");setRPrice("");setRLines([{id:uid(),ingId:null,qty:"",unit:"g"}]);}}>Cancel</button>}
          </div>
        </div>
      )}

      {/* ══════ LIBRARY ══════ */}
      {tab==="library"&&(
        <div className="pg fade">
          <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",marginBottom:4}}>
            <div><div className="pt">Library</div><div className="ps">{library.length} ingredients · prices flow into recipes</div></div>
            <button className="btn bteal btn-sm" style={{marginTop:4}} onClick={()=>setIngForm({name:"",category:"Veg & Produce",packWt:"",packCost:"",supplier:"Central"})}>+ Add</button>
          </div>
          {ingForm&&<div className="card teal" style={{marginBottom:13}}>
            <div className="cl">{ingForm.id?"Edit":"New Ingredient"}</div>
            <input className="inp" placeholder="Name" value={ingForm.name} onChange={e=>setIngForm(p=>({...p,name:e.target.value}))} style={{marginBottom:9}}/>
            <div className="fr">
              <div className="fc"><div className="fl">Category</div><select className="sel" value={ingForm.category} onChange={e=>setIngForm(p=>({...p,category:e.target.value}))}>{Object.keys(CAT_ICONS).map(c=><option key={c}>{c}</option>)}</select></div>
              <div className="fc"><div className="fl">Supplier</div><select className="sel" value={ingForm.supplier} onChange={e=>setIngForm(p=>({...p,supplier:e.target.value}))}>{SUPPLIERS.map(s=><option key={s}>{s}</option>)}</select></div>
            </div>
            <div className="fr">
              <div className="fc"><div className="fl">Pack Weight (g)</div><input className="inp" type="number" placeholder="1000" value={ingForm.packWt} onChange={e=>setIngForm(p=>({...p,packWt:e.target.value}))}/></div>
              <div className="fc"><div className="fl">Pack Cost (£)</div><input className="inp" type="number" placeholder="4.50" step={0.01} value={ingForm.packCost} onChange={e=>setIngForm(p=>({...p,packCost:e.target.value}))}/></div>
            </div>
            {ingForm.packWt&&ingForm.packCost&&<div style={{fontSize:10,color:"var(--teal)",fontWeight:700,marginBottom:9}}>£{(parseFloat(ingForm.packCost)/parseFloat(ingForm.packWt)).toFixed(5)}/g · £{(parseFloat(ingForm.packCost)/parseFloat(ingForm.packWt)*1000).toFixed(2)}/kg</div>}
            <div style={{display:"flex",gap:7}}>
              <button className="btn bteal btn-sm" onClick={()=>saveIng(ingForm)} disabled={!ingForm.name||!ingForm.packWt||!ingForm.packCost}>{ingForm.id?"Update":"Save"}</button>
              <button className="btn bghost btn-sm" onClick={()=>setIngForm(null)}>Cancel</button>
              {ingForm.id&&<button className="btn bred btn-sm" onClick={()=>{if(window.confirm("Delete?"))delIng(ingForm.id);}}>Delete</button>}
            </div>
          </div>}
          <input className="inp" placeholder="🔍 Search…" value={libQ} onChange={e=>setLibQ(e.target.value)} style={{marginBottom:10}}/>
          <div className="cts">{["All",...Object.keys(CAT_ICONS)].map(c=><button key={c} className={`ct${libCat===c?" on":""}`} style={libCat===c?{background:CAT_COLORS[c]||"var(--teal)",borderColor:CAT_COLORS[c]||"var(--teal)",color:"white"}:{}} onClick={()=>setLibCat(c)}>{c==="All"?"All":CAT_ICONS[c]+" "+c.split(" ")[0]}</button>)}</div>
          {filtLib.map(i=><div key={i.id} className="li" onClick={()=>setIngForm({...i})}><div className="ldot" style={{background:CAT_COLORS[i.category]||"var(--ink3)"}}/><div className="linfo"><div className="lname">{i.name}</div><div className="ldet">{i.supplier} · {i.packWt}g · {fmtGBP(i.packCost)}/pack</div></div><div className="lcost"><div>{fmtGBP(i.costPerG*1000)}/kg</div><div style={{fontSize:9,color:"var(--ink3)"}}>£{i.costPerG.toFixed(5)}/g</div></div></div>)}
        </div>
      )}

      {/* ══════ INVOICES ══════ */}
      {tab==="invoice"&&(
        <div className="pg fade">
          <div className="pt">Invoices</div>
          <div className="ps">AI reads · prices update · recipes recalculate</div>
          <div className="card">
            <div className="cl">Upload Photos</div>
            <div className={`dz${invImgs.length?" ov":""}`} onDragOver={e=>e.preventDefault()} onDrop={e=>{e.preventDefault();addImgs(e.dataTransfer.files);}} onClick={()=>invRef.current?.click()}>
              <div style={{fontSize:28,marginBottom:8}}>📄</div>
              <div style={{fontSize:14,fontWeight:700,marginBottom:4}}>Drop invoice photos here</div>
              <div style={{fontSize:11,color:"var(--ink3)"}}>Tap to choose · any supplier</div>
              <input ref={invRef} type="file" accept="image/*" multiple style={{display:"none"}} onChange={e=>addImgs(e.target.files)}/>
            </div>
            {invImgs.length>0&&<div className="th-row">{invImgs.map(img=><div key={img.id} className="th" onClick={()=>setInvImgs(p=>p.filter(i=>i.id!==img.id))}><img src={img.src} alt=""/></div>)}</div>}
          </div>
          <div style={{display:"flex",gap:8,marginBottom:10}}>
            <button className="btn bteal" style={{flex:1,justifyContent:"center"}} onClick={scanInvoice} disabled={invScan||!invImgs.length}>{invScan?<><span className="spin"/> {invLbl||"Scanning…"}</>:`🔍 Scan${invImgs.length>0?" "+invImgs.length+" photo":""}`}</button>
            {invImgs.length>0&&!invScan&&<button className="btn bghost" onClick={()=>{setInvImgs([]);setInvExt(null);setInvErr("");}}>✕</button>}
          </div>
          {(invScan||invProg>0)&&<div className="pw"><div className="pb"><div className="pbf" style={{width:`${invProg}%`}}/></div><span className="plbl">{invLbl}</span></div>}
          {invErr&&<div className="alert err">⚠ {invErr}</div>}
          {invExt&&<div className="card teal">
            <div className="cl">Extracted Items</div>
            <div className="fr" style={{marginBottom:10}}>
              <div className="fc"><div className="fl">Supplier</div><select className="sel" value={invExt.meta.supplier} onChange={e=>setInvExt(p=>({...p,meta:{...p.meta,supplier:e.target.value}}))}>{SUPPLIERS.map(s=><option key={s}>{s}</option>)}</select></div>
              <div className="fc"><div className="fl">Date</div><input className="inp" value={invExt.meta.date} onChange={e=>setInvExt(p=>({...p,meta:{...p.meta,date:e.target.value}}))}/></div>
            </div>
            {invExt.items.filter(i=>i.libId).length>0&&<div className="alert ok" style={{marginBottom:10}}>🔄 {invExt.items.filter(i=>i.libId).length} matched — prices + all recipe costs will update</div>}
            <div style={{overflowX:"auto",marginBottom:10}}>
              <table className="itbl">
                <thead><tr><th>✓</th><th>Product</th><th>Qty</th><th>Unit £</th><th>Match</th></tr></thead>
                <tbody>{invExt.items.map(item=><tr key={item.id} style={{opacity:item.selected?1:.35}}><td><input type="checkbox" checked={item.selected} onChange={()=>setInvExt(p=>({...p,items:p.items.map(i=>i.id===item.id?{...i,selected:!i.selected}:i)}))} style={{accentColor:"var(--teal)"}}/></td><td style={{maxWidth:110,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontWeight:600}}>{item.name}</td><td>{item.qty}</td><td style={{color:"var(--teal)",fontWeight:700}}>{fmtGBP(item.unit_price||0)}</td><td>{item.libId?<span className="mk">✓ matched</span>:<span className="mn">new</span>}</td></tr>)}</tbody>
              </table>
            </div>
            <div style={{display:"flex",gap:8}}>
              <button className="btn bteal btn-sm" onClick={saveInvoice} disabled={!invExt.items.some(i=>i.selected)}>💾 Save + Update</button>
              <button className="btn bred btn-sm" onClick={()=>{setInvExt(null);setInvErr("");}}>✕</button>
            </div>
          </div>}
          {invoices.length>0&&<div style={{marginTop:14}}><div className="cl">Saved Invoices</div>{invoices.slice(0,6).map(inv=><div key={inv.id} className="card" style={{padding:"11px 13px",marginBottom:7}}><div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}><div><div style={{fontWeight:700,fontSize:13}}>{inv.supplier} <span style={{color:"var(--ink3)",fontWeight:400,fontSize:11}}>· {inv.inv_number}</span></div><div style={{fontSize:10,color:"var(--ink3)",marginTop:2}}>{inv.date} · {inv.items?.length} items · <span style={{color:"var(--teal)",fontWeight:700}}>{fmtGBP(inv.total)}</span></div></div><button className="btn bred btn-xs" onClick={()=>{if(window.confirm("Delete?"))setInvoices(p=>p.filter(i=>i.id!==inv.id));}}>✕</button></div></div>)}</div>}
        </div>
      )}

      {/* ══════ STOCK ══════ */}
      {tab==="stock"&&(
        <div className="pg fade">
          <div className="pt">Stock Take</div>
          <div className="ps">Enter pack counts · live value</div>
          <div className="kr">
            <div className="kpi" style={{borderColor:"rgba(61,139,114,.2)",background:"rgba(61,139,114,.04)"}}><div className="kl">Stock Value</div><div className="kv t">{fmtGBP(stockValue)}</div><div className="ks">{stockCounted.length} items counted</div></div>
            <div className="kpi"><div className="kl">Progress</div><div className="kv">{stockCounted.length}<span style={{fontSize:13,color:"var(--ink3)"}}> / {library.length}</span></div><div className="mbar" style={{marginTop:6}}><div className="mf" style={{width:`${stockCounted.length/library.length*100}%`,background:"var(--teal)"}}/></div></div>
          </div>
          {stockCounted.length>0&&<div className="card"><div className="cl">Counted Items</div>{stockCounted.slice(0,5).map(i=>{const c=parseFloat(stock[i.id])||0;return<div key={i.id} style={{display:"flex",justifyContent:"space-between",fontSize:12,padding:"5px 0",borderBottom:"1px solid var(--border)"}}><span style={{color:"var(--ink2)",fontWeight:500}}>{i.name}</span><span style={{fontWeight:700,color:"var(--teal)"}}>{c} · {fmtGBP(c*i.packCost)}</span></div>;})}{stockCounted.length>5&&<div style={{fontSize:10,color:"var(--ink3)",marginTop:5}}>+{stockCounted.length-5} more</div>}<div style={{display:"flex",justifyContent:"space-between",marginTop:10,padding:"8px 0",borderTop:"1px solid var(--border)"}}><span style={{fontWeight:800,fontSize:14}}>Total</span><span style={{fontWeight:900,color:"var(--teal)",fontSize:16}}>{fmtGBP(stockValue)}</span></div><button className="btn bred btn-xs" style={{marginTop:7}} onClick={()=>{if(window.confirm("Clear all?"))setStock({});}}>Clear All</button></div>}
          <input className="inp" placeholder="🔍 Search…" value={stQ} onChange={e=>setStQ(e.target.value)} style={{marginBottom:10}}/>
          <div className="cts">{["All",...Object.keys(CAT_ICONS)].map(c=><button key={c} className={`ct${stCat===c?" on":""}`} style={stCat===c?{background:CAT_COLORS[c]||"var(--teal)",borderColor:CAT_COLORS[c]||"var(--teal)",color:"white"}:{}} onClick={()=>setStCat(c)}>{c==="All"?"All":CAT_ICONS[c]+" "+c.split(" ")[0]}</button>)}</div>
          {filtStock.map(i=>{const c=parseFloat(stock[i.id])||0;return<div key={i.id} className={`si${c>0?" counted":""}`}><div className="ldot" style={{background:CAT_COLORS[i.category]||"var(--ink3)"}}/><div style={{flex:1,minWidth:0}}><div style={{fontSize:12,fontWeight:700,color:"var(--ink)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{i.name}</div><div style={{fontSize:10,color:"var(--ink3)",marginTop:1}}>{fmtGBP(i.packCost)}/pack · {i.packWt}g</div></div><input className="sqi" type="number" placeholder="0" min={0} step={0.5} value={stock[i.id]||""} onChange={e=>setStock(p=>({...p,[i.id]:e.target.value}))}/><div style={{fontSize:11,fontWeight:700,color:"var(--teal)",width:54,textAlign:"right"}}>{c>0?fmtGBP(c*i.packCost):"—"}</div></div>;})}
        </div>
      )}

      {/* ══════ LABOUR ══════ */}
      {tab==="labour"&&(
        <div className="pg fade">
          <div className="pt">Labour & Sales</div>
          <div className="ps">Log daily trading · {TARGET_LAB*100}% target</div>
          {labStats&&<>
            <div className="kr">
              <div className="kpi" style={{borderColor:"rgba(61,139,114,.2)",background:"rgba(61,139,114,.04)"}}><div className="kl">Sales ({labStats.n} days)</div><div className="kv t">{fmtGBP(labStats.ts)}</div></div>
              <div className="kpi"><div className="kl">Labour %</div><div className={`kv ${labStats.lp>TARGET_LAB?"r":labStats.lp>0.24?"a":"g"}`}>{(labStats.lp*100).toFixed(1)}%</div><div className="ks">{fmtGBP(labStats.tl)} · &lt;{TARGET_LAB*100}%</div></div>
            </div>
            {labStats.fp!==null&&<div className="kr">
              <div className="kpi"><div className="kl">Food %</div><div className={`kv ${labStats.fp>TARGET_FOOD?"r":labStats.fp>0.25?"a":"g"}`}>{(labStats.fp*100).toFixed(1)}%</div><div className="ks">&lt;{TARGET_FOOD*100}%</div></div>
              <div className="kpi"><div className="kl">Combined %</div><div className={`kv ${labStats.cp>0.56?"r":labStats.cp>0.52?"a":"g"}`}>{(labStats.cp*100).toFixed(1)}%</div><div className="ks">&lt;56% target</div></div>
            </div>}
          </>}
          <div className="card">
            <div className="cl">Log a Trading Day</div>
            <div className="fr"><div className="fc"><div className="fl">Date</div><input className="inp" type="date" value={lDate} onChange={e=>setLDate(e.target.value)}/></div><div className="fc"><div className="fl">Total Sales (£)</div><input className="inp" type="number" placeholder="2400" value={lSales} onChange={e=>setLSales(e.target.value)} step={10} min={0}/></div></div>
            <div className="fr"><div className="fc"><div className="fl">Hours Worked</div><input className="inp" type="number" placeholder="24" value={lHours} onChange={e=>setLHours(e.target.value)} step={0.5} min={0}/></div><div className="fc"><div className="fl">Avg Rate (£/hr)</div><input className="inp" type="number" placeholder="12.50" value={lRate} onChange={e=>setLRate(e.target.value)} step={0.25} min={0}/></div></div>
            <div className="fr"><div className="fc"><div className="fl">Food Cost (£) opt.</div><input className="inp" type="number" placeholder="580" value={lFood} onChange={e=>setLFood(e.target.value)} step={10} min={0}/></div><div className="fc"><div className="fl">Notes</div><input className="inp" placeholder="e.g. Bank holiday" value={lNote} onChange={e=>setLNote(e.target.value)}/></div></div>
            {lSales&&lHours&&<div className="sum" style={{marginBottom:10}}>
              <div className="sr"><span className="sl">Labour cost</span><span className="sv">{fmtGBP(parseFloat(lHours)*parseFloat(lRate))}</span></div>
              <div className="sr"><span className="sl">Labour %</span><span style={{fontWeight:800,color:parseFloat(lHours)*parseFloat(lRate)/parseFloat(lSales)>TARGET_LAB?"var(--red)":"var(--green)"}}>{(parseFloat(lHours)*parseFloat(lRate)/parseFloat(lSales)*100).toFixed(1)}%</span></div>
              {lFood&&<div className="sr"><span className="sl">Food %</span><span style={{fontWeight:800}}>{(parseFloat(lFood)/parseFloat(lSales)*100).toFixed(1)}%</span></div>}
            </div>}
            <button className="btn bteal btn-full" onClick={saveLabour} disabled={!lSales||!lHours}>➕ Log Trading Day</button>
          </div>
          <div className="card">
            <div className="cl">AI Dish Suggestions</div>
            <p style={{fontSize:12,color:"var(--ink2)",marginBottom:12,lineHeight:1.6}}>Claude analyses your {library.length} ingredients and suggests high-margin dishes.</p>
            <button className="btn bai btn-full" onClick={askAI} disabled={aiLoad}>{aiLoad?<><span className="spin"/> Analysing…</>:"✨ Suggest profitable dishes"}</button>
            {aiTxt&&<div className="aibox"><div className="aititle">💡 Claude's suggestions</div><div className="aitxt">{aiTxt}</div></div>}
          </div>
          {labour.length>0&&<div><div className="cl">Recent Days</div>{labour.slice(0,10).map(e=><div key={e.id} className="ld"><div className="ldate">{e.date}{e.note&&<span style={{marginLeft:8,color:"var(--ink4)"}}>· {e.note}</span>}</div><div className="lpills"><div className="lpill" style={{background:"rgba(61,139,114,.1)",color:"var(--teal)",borderColor:"rgba(61,139,114,.2)"}}>{fmtGBP(e.sales)} sales</div><div className="lpill" style={{background:e.labourPct>TARGET_LAB?"rgba(192,57,43,.08)":"rgba(44,111,168,.08)",color:e.labourPct>TARGET_LAB?"var(--red)":"var(--blue)",borderColor:e.labourPct>TARGET_LAB?"rgba(192,57,43,.2)":"rgba(44,111,168,.2)"}}>{(e.labourPct*100).toFixed(1)}% labour</div>{e.foodPct!==null&&<div className="lpill" style={{background:"rgba(184,134,11,.08)",color:"var(--amber)",borderColor:"rgba(184,134,11,.2)"}}>{(e.foodPct*100).toFixed(1)}% food</div>}<div className="lpill" style={{background:e.combinedPct>0.56?"rgba(192,57,43,.08)":"rgba(30,122,64,.08)",color:e.combinedPct>0.56?"var(--red)":"var(--green)",borderColor:e.combinedPct>0.56?"rgba(192,57,43,.2)":"rgba(30,122,64,.2)"}}>{(e.combinedPct*100).toFixed(1)}% combined</div></div></div>)}<button className="btn bred btn-xs" style={{marginTop:4}} onClick={()=>{if(window.confirm("Clear all?"))setLabour([]);}}>Clear all</button></div>}
        </div>
      )}

      {/* ══════ STAFF & ROSTER ══════ */}
      {tab==="staff"&&(
        <div className="pg fade">
          <div className="pt">Staff & Roster</div>
          <div className="ps">Smart rostering · {TARGET_LAB*100}% labour target</div>

          {/* Sub-tabs */}
          <div className="stabs">
            {[{id:"roster",label:"📅 Roster"},{id:"team",label:"👥 Team"},{id:"analytics",label:"📊 Analytics"},{id:"connect",label:"🔗 Connect"}].map(t=>(
              <button key={t.id} className={`stab${staffView===t.id?" on":""}`} onClick={()=>setStaffView(t.id)}>{t.label}</button>
            ))}
          </div>

          {/* ── ROSTER ── */}
          {staffView==="roster"&&(
            <>
              {/* Week navigation */}
              <div className="week-nav">
                <button className="week-btn" onClick={()=>changeWeek(-1)}>← Prev</button>
                <div>
                  <div className="week-label">w/c {new Date(rosterWeek).toLocaleDateString("en-GB",{day:"numeric",month:"short"})}</div>
                  <div style={{fontSize:9,color:"var(--ink3)",textAlign:"center",marginTop:1}}>
                    {staff.length} staff · {fmtGBP(rosterCost)} labour
                  </div>
                </div>
                <button className="week-btn" onClick={()=>changeWeek(1)}>Next →</button>
              </div>

              {/* Labour budget vs cost */}
              {estWeekSales>0&&(
                <div className="card" style={{marginBottom:12,borderColor:rosterLabPct!==null&&rosterLabPct>TARGET_LAB?"rgba(192,57,43,.3)":"rgba(61,139,114,.2)",background:rosterLabPct!==null&&rosterLabPct>TARGET_LAB?"rgba(192,57,43,.04)":"rgba(61,139,114,.04)"}}>
                  <div style={{display:"flex",alignItems:"center",gap:12}}>
                    <LabRing pct={rosterLabPct||0} size={64}/>
                    <div style={{flex:1}}>
                      <div style={{fontSize:14,fontWeight:800,color:rosterLabPct!==null?labCol(rosterLabPct):"var(--ink)"}}>
                        {rosterLabPct!==null?`${(rosterLabPct*100).toFixed(1)}% est. labour`:"Add shifts to see labour %"}
                      </div>
                      <div style={{fontSize:11,color:"var(--ink3)",marginTop:3}}>
                        Budget: {fmtGBP(estWeekSales*TARGET_LAB)} · Rostered: {fmtGBP(rosterCost)}
                      </div>
                      <div style={{fontSize:10,color:"var(--ink3)",marginTop:1}}>
                        Based on {DAYS.filter(d=>dayAverages[d]?.n>0).length} days of historical data
                        {labour.length<3&&" (add trading days for accuracy)"}
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {/* Day activity from POS history */}
              {labour.length>0&&(
                <div className="card" style={{marginBottom:12}}>
                  <div className="cl">Historical Sales by Day</div>
                  <div className="day-bars">
                    {DAYS.map(d=>{
                      const avg=dayAverages[d]?.avg||0;
                      const maxAvg=Math.max(...DAYS.map(x=>dayAverages[x]?.avg||0));
                      const pct=maxAvg>0?avg/maxAvg:0;
                      const dayCost=rosterDayCost[d]||0;
                      const labPct=avg>0?dayCost/avg:0;
                      return(
                        <div key={d} className="day-bar-wrap">
                          <div className="day-bar-outer">
                            <div className="day-bar-inner" style={{height:`${pct*100}%`,background:labPct>TARGET_LAB?"var(--red)":pct>0.7?"var(--teal)":pct>0.4?"#7bc4b0":"var(--bg2)"}}/>
                          </div>
                          <div className="day-bar-lbl">{d}</div>
                          <div className="day-bar-val">{avg>0?`£${(avg/1000).toFixed(1)}k`:"—"}</div>
                        </div>
                      );
                    })}
                  </div>
                  <div style={{fontSize:10,color:"var(--ink3)",marginTop:4}}>Taller = busier · Red = labour over {TARGET_LAB*100}% for that day</div>
                </div>
              )}

              {/* Roster grid */}
              {staff.length===0?(
                <div className="empty">
                  <div className="empty-ico">👥</div>
                  <div style={{fontWeight:700,marginBottom:6}}>No staff added yet</div>
                  <div style={{fontSize:12,marginBottom:16}}>Add your team in the Team tab first</div>
                  <button className="btn bteal btn-sm" onClick={()=>setStaffView("team")}>Add Team Members →</button>
                </div>
              ):(
                <>
                  <div className="roster-grid">
                    <table className="rg-table">
                      <thead>
                        <tr>
                          <th className="rg-th" style={{textAlign:"left",width:90}}>Staff</th>
                          {DAYS.map(d=>(
                            <th key={d} className="rg-th">
                              <div>{d}</div>
                              {rosterDayCost[d]>0&&<div style={{color:"var(--teal)",fontWeight:800}}>{fmtGBP(rosterDayCost[d])}</div>}
                            </th>
                          ))}
                          <th className="rg-th">Hrs</th>
                        </tr>
                      </thead>
                      <tbody>
                        {staff.map(s=>(
                          <tr key={s.id}>
                            <td className="rg-name">
                              <div style={{display:"flex",alignItems:"center",gap:6}}>
                                <div style={{width:22,height:22,borderRadius:"50%",background:roleColor(s.role),display:"flex",alignItems:"center",justifyContent:"center",fontSize:9,fontWeight:800,color:"white",flexShrink:0}}>{initials(s.name)}</div>
                                <div>
                                  <div style={{fontSize:10,fontWeight:700}}>{s.name.split(" ")[0]}</div>
                                  <div style={{fontSize:8,color:"var(--ink3)"}}>{fmtGBP(s.rate)}/hr</div>
                                </div>
                              </div>
                            </td>
                            {DAYS.map(d=>{
                              const shifts=(weekRoster[s.id]||[]).filter(sh=>sh.day===d);
                              return(
                                <td key={d} className="rg-td">
                                  {shifts.map(sh=>(
                                    <div key={sh.id} className="shift-chip">
                                      <span>{sh.start}–{sh.end}</span>
                                      <button className="shift-del" onClick={()=>removeShift(s.id,sh.id)}>×</button>
                                    </div>
                                  ))}
                                  <button className="add-shift-btn" onClick={()=>setShiftForm({staffId:s.id,staffName:s.name,day:d,start:"09:00",end:"17:00"})}>+</button>
                                </td>
                              );
                            })}
                            <td className="rg-td" style={{textAlign:"center",fontSize:10,fontWeight:700,color:staffHours[s.id]>s.contractHours?"var(--red)":"var(--ink)"}}>
                              {(staffHours[s.id]||0).toFixed(0)}h
                              {s.contractHours>0&&<div style={{fontSize:8,color:"var(--ink3)"}}>{s.contractHours}h ctr</div>}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>

                  {/* AI roster builder */}
                  <div className="card" style={{borderColor:"rgba(139,92,246,.2)",background:"rgba(139,92,246,.04)"}}>
                    <div className="cl" style={{color:"#7c3aed"}}>✨ AI Roster Builder</div>
                    <p style={{fontSize:12,color:"var(--ink2)",marginBottom:12,lineHeight:1.6}}>
                      Claude analyses your busiest days from {labour.length} logged trading days and builds the most cost-efficient roster to keep labour at {TARGET_LAB*100}%.
                    </p>
                    <button className="btn bai btn-full" onClick={buildAIRoster} disabled={aiRosterLoad||!staff.length}>
                      {aiRosterLoad?<><span className="spin"/> Building optimal roster…</>:"✨ Build AI Roster Suggestion"}
                    </button>
                    {aiRosterTxt&&<div className="aibox"><div className="aititle">🗓 AI Roster Recommendation</div><div className="aitxt">{aiRosterTxt}</div></div>}
                  </div>
                </>
              )}

              {/* Shift form modal */}
              {shiftForm&&(
                <div style={{position:"fixed",inset:0,background:"rgba(0,0,0,0.4)",zIndex:500,display:"flex",alignItems:"flex-end",justifyContent:"center"}} onClick={e=>{if(e.target===e.currentTarget)setShiftForm(null);}}>
                  <div style={{background:"var(--white)",borderRadius:"20px 20px 0 0",padding:24,width:"100%",maxWidth:480,boxShadow:"0 -8px 40px rgba(0,0,0,0.15)"}}>
                    <div style={{fontWeight:800,fontSize:16,marginBottom:4}}>Add Shift</div>
                    <div style={{fontSize:12,color:"var(--ink3)",marginBottom:18}}>{shiftForm.staffName} · {shiftForm.day}</div>
                    <div className="fr">
                      <div className="fc"><div className="fl">Start Time</div><input className="inp" type="time" value={shiftForm.start} onChange={e=>setShiftForm(p=>({...p,start:e.target.value}))}/></div>
                      <div className="fc"><div className="fl">End Time</div><input className="inp" type="time" value={shiftForm.end} onChange={e=>setShiftForm(p=>({...p,end:e.target.value}))}/></div>
                    </div>
                    {shiftForm.start&&shiftForm.end&&(()=>{
                      const s=staff.find(x=>x.id===shiftForm.staffId);
                      const hrs=shiftHrs({start:shiftForm.start,end:shiftForm.end});
                      return hrs>0&&<div className="alert ok" style={{marginBottom:12}}>{hrs.toFixed(1)}hrs · {fmtGBP(hrs*(s?.rate||12.50))} cost</div>;
                    })()}
                    <div style={{display:"flex",gap:8}}>
                      <button className="btn bteal" style={{flex:1,justifyContent:"center"}} onClick={()=>addShift(shiftForm.staffId,{day:shiftForm.day,start:shiftForm.start,end:shiftForm.end})}>Add Shift ✓</button>
                      <button className="btn bghost" onClick={()=>setShiftForm(null)}>Cancel</button>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}

          {/* ── TEAM ── */}
          {staffView==="team"&&(
            <>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:12}}>
                <div style={{fontSize:13,color:"var(--ink3)"}}>{staff.length} team members</div>
                <button className="btn bteal btn-sm" onClick={()=>setStaffForm({name:"",role:"Chef de Partie",contract:"Full Time",rate:"12.50",contractHours:"40",email:"",phone:""})}>+ Add Member</button>
              </div>

              {staffForm&&(
                <div className="card teal" style={{marginBottom:13}}>
                  <div className="cl">{staffForm.id?"Edit":"New Team Member"}</div>
                  <div className="fr">
                    <div className="fc"><div className="fl">Full Name</div><input className="inp" placeholder="Sarah Mitchell" value={staffForm.name} onChange={e=>setStaffForm(p=>({...p,name:e.target.value}))}/></div>
                    <div className="fc"><div className="fl">Role</div><select className="sel" value={staffForm.role} onChange={e=>setStaffForm(p=>({...p,role:e.target.value}))}>{ROLES.map(r=><option key={r}>{r}</option>)}</select></div>
                  </div>
                  <div className="fr">
                    <div className="fc"><div className="fl">Email</div><input className="inp" type="email" placeholder="sarah@yourplace.co.uk" value={staffForm.email} onChange={e=>setStaffForm(p=>({...p,email:e.target.value}))}/></div>
                    <div className="fc"><div className="fl">Phone</div><input className="inp" placeholder="07xxx" value={staffForm.phone||""} onChange={e=>setStaffForm(p=>({...p,phone:e.target.value}))}/></div>
                  </div>
                  <div className="fr">
                    <div className="fc"><div className="fl">Contract</div><select className="sel" value={staffForm.contract} onChange={e=>setStaffForm(p=>({...p,contract:e.target.value}))}>{CONTRACT.map(c=><option key={c}>{c}</option>)}</select></div>
                    <div className="fc"><div className="fl">Contract Hrs/wk</div><input className="inp" type="number" placeholder="40" value={staffForm.contractHours} onChange={e=>setStaffForm(p=>({...p,contractHours:e.target.value}))} min={0} step={0.5}/></div>
                  </div>
                  <div className="fr">
                    <div className="fc"><div className="fl">Hourly Rate (£)</div><input className="inp" type="number" placeholder="12.50" value={staffForm.rate} onChange={e=>setStaffForm(p=>({...p,rate:e.target.value}))} step={0.25} min={0}/></div>
                    <div className="fc"><div className="fl">Weekly Cost (est.)</div><div style={{background:"var(--bg)",border:"1.5px solid var(--border)",borderRadius:"var(--r2)",padding:"11px 13px",fontSize:13,fontWeight:700,color:"var(--teal)"}}>{fmtGBP((parseFloat(staffForm.rate)||0)*(parseFloat(staffForm.contractHours)||0))}</div></div>
                  </div>
                  <div style={{display:"flex",gap:7}}>
                    <button className="btn bteal btn-sm" onClick={()=>saveStaff(staffForm)} disabled={!staffForm.name||!staffForm.role}>{staffForm.id?"Update":"Add to Team"}</button>
                    <button className="btn bghost btn-sm" onClick={()=>setStaffForm(null)}>Cancel</button>
                    {staffForm.id&&<button className="btn bred btn-sm" onClick={()=>{if(window.confirm("Remove?"))delStaff(staffForm.id);}}>Remove</button>}
                  </div>
                </div>
              )}

              {staff.length===0?(
                <div className="empty"><div className="empty-ico">👤</div><div style={{fontWeight:700,marginBottom:6}}>No team members yet</div><div style={{fontSize:12}}>Add your team above or connect a scheduling platform in the Connect tab</div></div>
              ):(
                <>
                  {/* Weekly wage bill summary */}
                  <div className="card" style={{borderColor:"rgba(61,139,114,.2)",background:"rgba(61,139,114,.04)",marginBottom:12}}>
                    <div className="cl">Weekly Wage Bill (contracted hours)</div>
                    <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                      <div>
                        <div style={{fontSize:24,fontWeight:900,color:"var(--teal)"}}>{fmtGBP(staff.reduce((a,s)=>a+s.rate*s.contractHours,0))}</div>
                        <div style={{fontSize:11,color:"var(--ink3)",marginTop:2}}>{staff.reduce((a,s)=>a+s.contractHours,0).toFixed(0)} total contracted hrs · {staff.length} staff</div>
                      </div>
                      {estWeekSales>0&&<div style={{textAlign:"right"}}>
                        <div style={{fontSize:13,fontWeight:800,color:staff.reduce((a,s)=>a+s.rate*s.contractHours,0)/estWeekSales>TARGET_LAB?"var(--red)":"var(--green)"}}>
                          {(staff.reduce((a,s)=>a+s.rate*s.contractHours,0)/estWeekSales*100).toFixed(1)}%
                        </div>
                        <div style={{fontSize:10,color:"var(--ink3)"}}>of est. sales<br/>({TARGET_LAB*100}% target)</div>
                      </div>}
                    </div>
                  </div>

                  {staff.map(s=>(
                    <div key={s.id} className="scard">
                      <div style={{display:"flex",alignItems:"flex-start",gap:12}}>
                        <div className="sav" style={{background:roleColor(s.role)}}>{initials(s.name)}</div>
                        <div style={{flex:1}}>
                          <div className="sname">{s.name}</div>
                          <div className="srole" style={{color:roleColor(s.role)}}>{s.role}</div>
                          {s.email&&<div style={{fontSize:10,color:"var(--ink3)",marginTop:2}}>✉ {s.email}</div>}
                          <div className="spills">
                            <div className="spill">{s.contract}</div>
                            <div className="spill">{s.contractHours}h/wk</div>
                            <div className="spill" style={{color:"var(--teal)",fontWeight:700}}>{fmtGBP(s.rate)}/hr</div>
                            <div className="spill" style={{color:"var(--green)",fontWeight:700}}>{fmtGBP(s.rate*s.contractHours)}/wk</div>
                            {staffHours[s.id]>0&&<div className="spill" style={{color:"var(--blue)"}}>{(staffHours[s.id]||0).toFixed(0)}h rostered</div>}
                          </div>
                        </div>
                        <button className="btn bghost btn-xs" onClick={()=>setStaffForm({...s})}>✏ Edit</button>
                      </div>
                    </div>
                  ))}
                </>
              )}
            </>
          )}

          {/* ── ANALYTICS ── */}
          {staffView==="analytics"&&(
            <>
              <div className="card">
                <div className="cl">Labour % vs {TARGET_LAB*100}% Target — All Time</div>
                {labour.length>=3?(
                  <ResponsiveContainer width="100%" height={160}>
                    <LineChart data={[...labour].slice(0,14).reverse().map(e=>({day:e.date.slice(5),lab:+(e.labourPct*100).toFixed(1),food:e.foodPct?+(e.foodPct*100).toFixed(1):null,combined:+(e.combinedPct*100).toFixed(1)}))} margin={{top:4,right:4,left:-28,bottom:0}}>
                      <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.05)"/>
                      <XAxis dataKey="day" tick={{fill:"#888",fontSize:8}} axisLine={false} tickLine={false}/>
                      <YAxis tick={{fill:"#888",fontSize:9}} axisLine={false} tickLine={false} tickFormatter={v=>`${v}%`}/>
                      <Tooltip contentStyle={{background:"white",border:"1px solid var(--border)",borderRadius:10,fontSize:11}} formatter={v=>[`${v}%`]}/>
                      <ReferenceLine y={TARGET_LAB*100} stroke="rgba(192,57,43,0.4)" strokeDasharray="4 4" label={{value:`${TARGET_LAB*100}% target`,position:"right",fontSize:8,fill:"var(--red)"}}/>
                      <Line type="monotone" dataKey="lab"  stroke="#2c6fa8" strokeWidth={2} dot={false} name="Labour %"/>
                      {labour.some(e=>e.foodPct)&&<Line type="monotone" dataKey="food" stroke="#d4724a" strokeWidth={2} dot={false} name="Food %"/>}
                      <Line type="monotone" dataKey="combined" stroke="#8b6fd4" strokeWidth={1.5} dot={false} name="Combined %" strokeDasharray="3 3"/>
                    </LineChart>
                  </ResponsiveContainer>
                ):<div className="empty" style={{padding:"24px 0"}}><div style={{fontSize:11}}>Log at least 3 trading days to see trends</div></div>}
              </div>

              <div className="card">
                <div className="cl">Busiest Days (Historical)</div>
                <ResponsiveContainer width="100%" height={130}>
                  <BarChart data={DAYS.map(d=>({day:d,sales:Math.round(dayAverages[d]?.avg||0),n:dayAverages[d]?.n||0}))} margin={{top:4,right:4,left:-28,bottom:0}}>
                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.05)"/>
                    <XAxis dataKey="day" tick={{fill:"#888",fontSize:9}} axisLine={false} tickLine={false}/>
                    <YAxis tick={{fill:"#888",fontSize:9}} axisLine={false} tickLine={false} tickFormatter={v=>`£${(v/1000).toFixed(1)}k`}/>
                    <Tooltip contentStyle={{background:"white",border:"1px solid var(--border)",borderRadius:10,fontSize:11}} formatter={(v,n,p)=>[`£${v.toLocaleString()} avg (${p?.payload?.n} days)`,n]}/>
                    <Bar dataKey="sales" fill="#3d8b72" radius={[5,5,0,0]} name="Avg Sales"/>
                  </BarChart>
                </ResponsiveContainer>
                <div style={{fontSize:10,color:"var(--ink3)",marginTop:6}}>Based on {labour.length} logged trading days. Add more days for accuracy.</div>
              </div>

              {/* Staff cost breakdown */}
              {staff.length>0&&(
                <div className="card">
                  <div className="cl">Staff Cost Breakdown</div>
                  {staff.sort((a,b)=>b.rate*b.contractHours-a.rate*a.contractHours).map(s=>{
                    const wkCost=s.rate*s.contractHours, pct=staff.reduce((a,x)=>a+x.rate*x.contractHours,0)>0?wkCost/staff.reduce((a,x)=>a+x.rate*x.contractHours,0):0;
                    return(
                      <div key={s.id} style={{marginBottom:10}}>
                        <div style={{display:"flex",justifyContent:"space-between",fontSize:12,marginBottom:4}}>
                          <span style={{fontWeight:700}}>{s.name} <span style={{fontSize:9,color:"var(--ink3)",fontWeight:400}}>({s.role})</span></span>
                          <span style={{fontWeight:700,color:"var(--teal)"}}>{fmtGBP(wkCost)}/wk</span>
                        </div>
                        <div className="mbar"><div className="mf" style={{width:`${pct*100}%`,background:roleColor(s.role)}}/></div>
                        <div style={{fontSize:9,color:"var(--ink3)",marginTop:2}}>{fmtGBP(s.rate)}/hr · {s.contractHours}h · {(pct*100).toFixed(0)}% of wage bill</div>
                      </div>
                    );
                  })}
                  <div style={{display:"flex",justifyContent:"space-between",padding:"10px 0",borderTop:"1px solid var(--border)",marginTop:4}}>
                    <span style={{fontWeight:800}}>Total weekly wage</span>
                    <span style={{fontWeight:900,color:"var(--teal)",fontSize:15}}>{fmtGBP(staff.reduce((a,s)=>a+s.rate*s.contractHours,0))}</span>
                  </div>
                  {estWeekSales>0&&<div style={{fontSize:11,color:"var(--ink3)"}}>Labour budget at {TARGET_LAB*100}%: {fmtGBP(estWeekSales*TARGET_LAB)} · {staff.reduce((a,s)=>a+s.rate*s.contractHours,0)>estWeekSales*TARGET_LAB?<span style={{color:"var(--red)",fontWeight:700}}>⚠ Over by {fmtGBP(staff.reduce((a,s)=>a+s.rate*s.contractHours,0)-estWeekSales*TARGET_LAB)}</span>:<span style={{color:"var(--green)",fontWeight:700}}>✅ Under by {fmtGBP(estWeekSales*TARGET_LAB-staff.reduce((a,s)=>a+s.rate*s.contractHours,0))}</span>}</div>}
                </div>
              )}
            </>
          )}

          {/* ── CONNECT ── */}
          {staffView==="connect"&&(
            <>
              <div className="alert info" style={{marginBottom:12}}>Connect any platform — use the pre-built integrations below or add your own custom API endpoint from any system.</div>

              {/* ── PRE-BUILT: Scheduling ── */}
              <div className="cl">Scheduling Platforms</div>
              {[{id:"sched",icon:"📅",name:"Deputy",desc:"Import staff, rosters and actual hours worked automatically"},{id:"sched",icon:"🔄",name:"Rotaready",desc:"Sync staff profiles, shifts and wage data in real time"},{id:"sched",icon:"👥",name:"Bizimply",desc:"Pull rota, attendance and payroll data automatically"}].map((api,i)=>(
                <div key={i} className="api-row">
                  <div className="api-icon">{api.icon}</div>
                  <div style={{flex:1}}><div className="api-name">{api.name}</div><div className="api-desc">{api.desc}</div></div>
                  {schedConnected?<span className="api-status-ok">✓ Connected</span>:(
                    <button className="btn bteal btn-xs" onClick={()=>connectApi("sched")} disabled={connectingApi==="sched"}>
                      {connectingApi==="sched"?<span className="spin-dark"/>:"Connect"}
                    </button>
                  )}
                </div>
              ))}

              {/* ── PRE-BUILT: POS ── */}
              <div className="cl" style={{marginTop:4}}>POS Systems</div>
              {[{id:"pos",icon:"💳",name:"Square",desc:"Pull daily takings, hourly sales breakdowns and cover counts"},{id:"pos",icon:"🍽",name:"Lightspeed",desc:"Live sales by hour to identify peak times for rostering"},{id:"pos",icon:"📱",name:"iZettle / Zettle",desc:"Import daily sales totals automatically"},{id:"pos",icon:"📊",name:"NOQ",desc:"Pull sales and cover data for busy period analysis"}].map((api,i)=>(
                <div key={i} className="api-row">
                  <div className="api-icon">{api.icon}</div>
                  <div style={{flex:1}}><div className="api-name">{api.name}</div><div className="api-desc">{api.desc}</div></div>
                  {posConnected?<span className="api-status-ok">✓ Connected</span>:(
                    <button className="btn bteal btn-xs" onClick={()=>connectApi("pos")} disabled={connectingApi==="pos"}>
                      {connectingApi==="pos"?<span className="spin-dark"/>:"Connect"}
                    </button>
                  )}
                </div>
              ))}

              {/* ── OPEN / CUSTOM API ── */}
              <div className="cl" style={{marginTop:8}}>
                Custom API Connection
                <span style={{marginLeft:8,fontSize:9,background:"rgba(61,139,114,.1)",color:"var(--teal)",border:"1px solid rgba(61,139,114,.2)",borderRadius:4,padding:"1px 7px",fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>Open</span>
              </div>

              <div className="card" style={{marginBottom:12}}>
                <p style={{fontSize:12,color:"var(--ink2)",lineHeight:1.65,marginBottom:14}}>
                  Connect <strong>any system with an API</strong> — your own POS, payroll, ERP, booking system or any third-party platform. Paste in the endpoint URL, add your API key, and Food Op Pro pulls the data automatically.
                </p>
                <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:8}}>
                  {["Any POS","Payroll","Booking systems","ERP","HR platforms","Custom apps","Webhooks"].map(tag=>(
                    <span key={tag} style={{background:"var(--bg)",border:"1px solid var(--border)",borderRadius:20,padding:"3px 10px",fontSize:10,fontWeight:600,color:"var(--ink2)"}}>{tag}</span>
                  ))}
                </div>
                <button className="btn bteal btn-sm" onClick={()=>setCustomApiForm({name:"",url:"",method:"GET",keyHeader:"Authorization",key:"",dataType:"sales",notes:"",enabled:true})}>
                  + Add Custom API
                </button>
              </div>

              {/* Custom API form */}
              {customApiForm&&(
                <div className="card teal" style={{marginBottom:13}}>
                  <div className="cl">{customApiForm.id?"Edit API Connection":"New API Connection"}</div>

                  <div className="fr">
                    <div className="fc">
                      <div className="fl">Connection Name</div>
                      <input className="inp" placeholder="e.g. My POS System" value={customApiForm.name} onChange={e=>setCustomApiForm(p=>({...p,name:e.target.value}))}/>
                    </div>
                    <div className="fc">
                      <div className="fl">Data Type</div>
                      <select className="sel" value={customApiForm.dataType} onChange={e=>setCustomApiForm(p=>({...p,dataType:e.target.value}))}>
                        <option value="sales">Sales / Takings</option>
                        <option value="staff">Staff / Roster</option>
                        <option value="labour">Labour Hours</option>
                        <option value="stock">Stock / Inventory</option>
                        <option value="orders">Orders / Covers</option>
                        <option value="payroll">Payroll</option>
                        <option value="custom">Custom / Other</option>
                      </select>
                    </div>
                  </div>

                  <div style={{marginBottom:10}}>
                    <div className="fl">API Endpoint URL</div>
                    <input className="inp" placeholder="https://api.yoursystem.com/v1/sales" value={customApiForm.url} onChange={e=>setCustomApiForm(p=>({...p,url:e.target.value}))}/>
                    <div style={{fontSize:10,color:"var(--ink3)",marginTop:4}}>The full URL that returns your data as JSON</div>
                  </div>

                  <div className="fr">
                    <div className="fc">
                      <div className="fl">HTTP Method</div>
                      <select className="sel" value={customApiForm.method} onChange={e=>setCustomApiForm(p=>({...p,method:e.target.value}))}>
                        <option>GET</option><option>POST</option>
                      </select>
                    </div>
                    <div className="fc">
                      <div className="fl">Auth Header Name</div>
                      <input className="inp" placeholder="Authorization" value={customApiForm.keyHeader} onChange={e=>setCustomApiForm(p=>({...p,keyHeader:e.target.value}))}/>
                    </div>
                  </div>

                  <div style={{marginBottom:10}}>
                    <div className="fl">API Key / Token</div>
                    <input className="inp" type="password" placeholder="Bearer your-api-key or just the key" value={customApiForm.key} onChange={e=>setCustomApiForm(p=>({...p,key:e.target.value}))}/>
                    <div style={{fontSize:10,color:"var(--ink3)",marginTop:4}}>Stored securely on this device only — never sent to our servers</div>
                  </div>

                  <div style={{marginBottom:14}}>
                    <div className="fl">Notes (optional)</div>
                    <input className="inp" placeholder="e.g. Returns daily sales totals, update frequency, etc." value={customApiForm.notes} onChange={e=>setCustomApiForm(p=>({...p,notes:e.target.value}))}/>
                  </div>

                  <div style={{display:"flex",gap:7,flexWrap:"wrap"}}>
                    <button className="btn bteal btn-sm" onClick={()=>saveCustomApi(customApiForm)} disabled={!customApiForm.name||!customApiForm.url}>{customApiForm.id?"Update":"Save Connection"}</button>
                    <button className="btn bghost btn-sm" onClick={()=>setCustomApiForm(null)}>Cancel</button>
                    {customApiForm.id&&<button className="btn bred btn-sm" onClick={()=>{if(window.confirm("Remove?"))delCustomApi(customApiForm.id);}}>Remove</button>}
                  </div>
                </div>
              )}

              {/* Saved custom APIs */}
              {customApis.length>0&&(
                <>
                  <div className="cl">Your Custom Connections ({customApis.length})</div>
                  {customApis.map(api=>{
                    const tr=testResult[api.id];
                    const statusColor=api.status==="connected"?"var(--green)":api.status==="error"?"var(--red)":"var(--ink3)";
                    const statusLabel=api.status==="connected"?"✓ Connected":api.status==="error"?"✗ Error":"◦ Untested";
                    return(
                      <div key={api.id} className="card" style={{marginBottom:9,borderColor:api.status==="connected"?"rgba(30,122,64,.25)":api.status==="error"?"rgba(192,57,43,.2)":"var(--border)"}}>
                        <div style={{display:"flex",alignItems:"flex-start",gap:10,marginBottom:10}}>
                          <div style={{width:36,height:36,borderRadius:10,background:api.status==="connected"?"rgba(30,122,64,.1)":api.status==="error"?"rgba(192,57,43,.1)":"var(--bg)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:18,flexShrink:0}}>
                            {api.dataType==="sales"?"💳":api.dataType==="staff"?"👥":api.dataType==="labour"?"⏱":api.dataType==="stock"?"📦":api.dataType==="orders"?"🍽":api.dataType==="payroll"?"💰":"🔗"}
                          </div>
                          <div style={{flex:1,minWidth:0}}>
                            <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:2}}>
                              <span style={{fontWeight:800,fontSize:13}}>{api.name}</span>
                              <span style={{fontSize:9,fontWeight:700,color:statusColor}}>{statusLabel}</span>
                            </div>
                            <div style={{fontSize:10,color:"var(--ink3)",wordBreak:"break-all"}}>{api.url}</div>
                            <div style={{display:"flex",gap:5,marginTop:5,flexWrap:"wrap"}}>
                              <span style={{background:"var(--bg)",border:"1px solid var(--border)",borderRadius:4,padding:"1px 7px",fontSize:9,fontWeight:600}}>{api.method}</span>
                              <span style={{background:"var(--bg)",border:"1px solid var(--border)",borderRadius:4,padding:"1px 7px",fontSize:9,fontWeight:600,color:"var(--teal)"}}>{api.dataType}</span>
                              {api.key&&<span style={{background:"var(--bg)",border:"1px solid var(--border)",borderRadius:4,padding:"1px 7px",fontSize:9,fontWeight:600}}>🔑 Auth set</span>}
                              {api.lastTested&&<span style={{fontSize:9,color:"var(--ink3)"}}>Tested {new Date(api.lastTested).toLocaleDateString("en-GB")}</span>}
                            </div>
                            {api.notes&&<div style={{fontSize:10,color:"var(--ink3)",marginTop:5,fontStyle:"italic"}}>{api.notes}</div>}
                          </div>
                        </div>

                        {/* Test result preview */}
                        {tr&&(
                          <div style={{background:tr.ok?"rgba(30,122,64,.06)":"rgba(192,57,43,.06)",border:`1px solid ${tr.ok?"rgba(30,122,64,.2)":"rgba(192,57,43,.2)"}`,borderRadius:8,padding:"8px 10px",marginBottom:10,fontSize:10,fontFamily:"monospace",color:tr.ok?"var(--green)":"var(--red)",wordBreak:"break-all",lineHeight:1.6}}>
                            <div style={{fontWeight:700,marginBottom:3}}>HTTP {tr.status} — {tr.ok?"Success":"Failed"}</div>
                            <div style={{color:"var(--ink3)",fontFamily:"monospace",fontSize:9}}>{tr.preview}</div>
                          </div>
                        )}

                        <div style={{display:"flex",gap:7}}>
                          <button className="btn bteal btn-xs" onClick={()=>testCustomApi(api)} disabled={testingApi===api.id}>
                            {testingApi===api.id?<><span className="spin-dark"/> Testing…</>:"🔍 Test Connection"}
                          </button>
                          <button className="btn bghost btn-xs" onClick={()=>setCustomApiForm({...api})}>✏ Edit</button>
                          <button className="btn bred btn-xs" onClick={()=>{if(window.confirm("Remove?"))delCustomApi(api.id);}}>✕</button>
                        </div>
                      </div>
                    );
                  })}
                </>
              )}

              {/* How it works */}
              <div className="cl" style={{marginTop:4}}>How Connections Work</div>
              <div className="card">
                {[
                  ["📅","Scheduling API → Roster tab","Staff, shift times and contracted hours import automatically into the weekly roster"],
                  ["💳","POS API → Labour & Overview tabs","Daily sales and cover counts populate the labour tracker and dashboard charts without manual entry"],
                  ["⏱","Actual hours → Labour % auto-calculation","Real shift hours × rate ÷ actual sales = live labour % with no logging required"],
                  ["🤖","AI uses all data for roster suggestions","The more data connected, the smarter the AI roster builder gets at predicting busy periods"],
                  ["🔑","Your keys stay on your device","API keys are stored in your browser only — they never leave your device or touch our servers"]
                ].map(([icon,title,desc],i,arr)=>(
                  <div key={i} style={{display:"flex",gap:12,padding:"10px 0",borderBottom:i<arr.length-1?"1px solid var(--border)":"none"}}>
                    <div style={{fontSize:20,flex:"0 0 28px"}}>{icon}</div>
                    <div><div style={{fontSize:12,fontWeight:700,marginBottom:2}}>{title}</div><div style={{fontSize:11,color:"var(--ink3)",lineHeight:1.5}}>{desc}</div></div>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      )}

      {/* BOTTOM NAV */}
      <nav className="nav">
        {TABS.map(({id,icon,label})=>(
          <button key={id} className={`nb${tab===id?" on":""}`} onClick={()=>setTab(id)}>
            <span className="ico">{icon}</span><span>{label}</span>
          </button>
        ))}
      </nav>
    </div>
    </>
  );
}