/* Joola POS : encre forêt, mangue pour l'action principale, polices système (fonctionne sans internet). */
:root{--ink:#14301f;--ink2:#1d4a31;--leaf:#2f7d4f;--mango:#f0a30a;--mango-d:#c98400;--bg:#edf1ee;--paper:#fff;--line:#d3dcd5;--muted:#5f7066;--bad:#b3261e;--warn:#9a5b00;--good:#1c6b3c;--r:10px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:16px/1.45 var(--font);color:var(--ink);background:var(--bg);font-variant-numeric:tabular-nums}
h1{font-size:1.45rem;margin:0}h2{font-size:1.15rem;margin:.2rem 0 .8rem}h2.sub{margin-top:1.6rem}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--mango);outline-offset:2px}
.muted{color:var(--muted);font-size:.9rem}.bad{color:var(--bad)}.ok{color:var(--good)}.empty{color:var(--muted);padding:1.2rem;text-align:center}
.r{text-align:right}.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.row.end{justify-content:flex-end;margin-top:1rem}.wrap{flex-wrap:wrap}

/* Disposition : menu latéral à gauche, contenu à droite */
.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;transition:grid-template-columns .18s}
.app.collapsed{grid-template-columns:72px minmax(0,1fr)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--ink);color:#fff;z-index:30;overflow:hidden}
.side-brand{display:flex;align-items:center;gap:.6rem;padding:1rem .9rem .8rem;font-size:1.25rem;border-bottom:1px solid #24503a}
.side-brand b{flex:1;letter-spacing:.02em}
.side-toggle{background:#1d4a31;color:#cfe0d5;border:0;border-radius:8px;width:30px;height:30px;font-size:1.2rem;line-height:1;cursor:pointer}
.side-toggle:hover{background:#2f7d4f}
.side-nav{flex:1;display:flex;flex-direction:column;gap:.15rem;padding:.7rem .55rem;overflow-y:auto}
.side-nav a{display:flex;align-items:center;gap:.8rem;color:#cfe0d5;text-decoration:none;padding:.72rem .8rem;border-radius:10px;white-space:nowrap;min-height:46px}
.side-nav a svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-nav a:hover{background:#1d4a31;color:#fff}
.side-nav a.on{background:#1d4a31;color:#fff;box-shadow:inset 4px 0 0 var(--mango)}
.side-foot{padding:.8rem .9rem 1rem;border-top:1px solid #24503a;display:flex;flex-direction:column;gap:.55rem;font-size:.88rem}
.side-foot .who{display:flex;flex-direction:column;line-height:1.25}.side-foot .who span{color:#9fb8a9;font-size:.8rem}
.side-out{background:none;border:1px solid #3c6b52;color:#cfe0d5;border-radius:8px;padding:.45rem;cursor:pointer;min-height:38px}.side-out:hover{background:#1d4a31}
.net{padding:.2rem .6rem;border-radius:99px;font-size:.78rem;background:#264d38;align-self:flex-start}.net.off{background:var(--mango);color:#2b1c00;font-weight:600}
.app.collapsed .side-brand b,.app.collapsed .side-nav a span,.app.collapsed .side-foot .who,.app.collapsed .side-out,.app.collapsed .net{display:none}
.app.collapsed .side-brand{justify-content:center;flex-direction:column;gap:.4rem;padding:.8rem 0}.app.collapsed .side-toggle{transform:rotate(180deg)}
.app.collapsed .side-nav a{justify-content:center;padding:.72rem 0}.app.collapsed .side-foot{align-items:center;padding:.8rem 0}
.main{min-width:0}.mbar{display:none}.scrim{display:none}
.view{padding:1.2rem 1.4rem;max-width:1500px;margin:0 auto}
.phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:1rem;flex-wrap:wrap}

/* Boutons et champs */
.btn{min-height:46px;padding:.5rem 1.1rem;border:1px solid var(--line);background:var(--paper);border-radius:var(--r);cursor:pointer}
.btn:hover:not(:disabled){border-color:var(--leaf)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.btn.primary:hover:not(:disabled){background:var(--ink2)}
.btn.pay{background:var(--mango);border-color:var(--mango-d);color:#2b1c00;font-weight:700;flex:1;font-size:1.1rem;min-height:56px}
.btn.sm{min-height:34px;padding:.2rem .7rem;font-size:.88rem}.btn.full{width:100%;margin-top:.8rem}
.link{background:none;border:0;color:var(--leaf);text-decoration:underline;cursor:pointer;padding:.3rem}.link.light{color:#cfe0d5}
input,select,textarea{width:100%;min-height:44px;padding:.5rem .7rem;border:1px solid #b8c5bc;border-radius:8px;background:#fff}
label{display:block;font-size:.9rem;color:var(--muted);margin:.7rem 0 0}label input,label select,label textarea{margin-top:.25rem;color:var(--ink)}
.x{border:0;background:none;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--muted);min-width:36px;min-height:36px}

/* Caisse */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:1rem;align-items:start}
.search{font-size:1.1rem;min-height:52px;margin-bottom:.8rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.7rem}
.tile{display:flex;flex-direction:column;gap:.15rem;text-align:left;min-height:118px;padding:.8rem;background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--leaf);border-radius:var(--r);cursor:pointer}
.tile:hover:not(:disabled){border-left-color:var(--mango);transform:translateY(-1px)}.tile:active:not(:disabled){transform:none}
.tile.out{border-left-color:#c9d1cb;opacity:.55}.tn{font-weight:700;font-size:1.05rem}.to{color:var(--muted);font-size:.85rem}.tp{font-size:1.15rem;margin-top:auto}.tp small{color:var(--muted);font-size:.8rem}.ts2{font-size:.8rem;color:var(--good)}.tile.out .ts2{color:var(--bad)}
.ticketpane{position:sticky;top:16px}
.receipt{background:var(--paper);border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;padding:1rem;position:relative;margin-bottom:12px}
.receipt::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-12px;height:12px;background:linear-gradient(-135deg,var(--paper) 6px,transparent 0) 0 0/16px 12px,linear-gradient(135deg,var(--paper) 6px,transparent 0) 0 0/16px 12px;filter:drop-shadow(0 1px 0 var(--line))}
.rhead{display:flex;justify-content:space-between;align-items:center}
.lines{max-height:calc(100vh - 430px);min-height:120px;overflow:auto;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin:.5rem 0}
.cl{padding:.6rem 0;border-bottom:1px dotted var(--line)}.cl:last-child{border:0}.cl1{display:flex;justify-content:space-between}
.cl2{display:flex;align-items:center;gap:.4rem;margin-top:.3rem}.step{width:44px;height:44px;border:1px solid var(--line);background:#f4f7f5;border-radius:8px;font-size:1.3rem;cursor:pointer}
.qty{width:84px;text-align:center;font-weight:700}.price{width:96px;text-align:right}.price.disc{border-color:var(--mango);background:#fff7e3}.u{color:var(--muted);font-size:.85rem}
.packs{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}.chip{border:1px solid var(--leaf);color:var(--leaf);background:#fff;border-radius:99px;padding:.2rem .7rem;font-size:.8rem;cursor:pointer;min-height:32px}
.cl3{display:flex;justify-content:space-between;font-weight:700;margin-top:.3rem}.cl3 span:first-child{color:var(--warn);font-weight:400;font-size:.85rem}
.sum{display:flex;justify-content:space-between;padding:.15rem 0}.sum.total{font-size:1.5rem;font-weight:800;border-top:2px solid var(--ink);margin-top:.4rem;padding-top:.4rem}
.rfoot select{margin-bottom:.6rem}.rfoot .row{margin-top:.8rem;flex-wrap:nowrap}

/* Fenêtres */
.overlay{position:fixed;inset:0;background:rgba(10,25,16,.55);display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;z-index:20;overflow:auto}
.dialog{background:var(--paper);border-radius:14px;padding:1.3rem;width:min(520px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35)}.dialog.wide{width:min(920px,100%)}
.due{display:flex;justify-content:space-between;font-size:1.6rem;padding:.6rem .8rem;background:#f4f7f5;border-radius:8px;margin-bottom:.8rem}
.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.8rem}
.prow{display:flex;gap:.5rem;align-items:center;margin:.4rem 0}.prow span{flex:1}.prow input{width:140px;text-align:right}
.status{margin:.8rem 0;padding:.6rem .8rem;border-radius:8px;background:#fff7e3}.status.good{background:#e6f4ea}
.approval{border:2px solid var(--mango);border-radius:8px;padding:.7rem;margin-top:.8rem}.approval input{margin-top:.4rem}
.note{padding:.7rem .9rem;border-radius:8px;margin:.8rem 0}.note.warn{background:#fff3d6;color:#5a3a00}.note.good{background:#e6f4ea;color:#14502b}
.secret{font:700 1.15rem ui-monospace,Consolas,monospace;letter-spacing:.08em;background:#f4f7f5;padding:.7rem;border-radius:8px;word-break:break-all;user-select:all}

/* Tableaux, cartes, filtres */
.scroll{overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid #e6ece8;vertical-align:top}
.tbl th{background:#f4f7f5;font-weight:600;color:var(--muted);font-size:.85rem;position:sticky;top:0}.tbl th.r,.tbl td.r{text-align:right}.tbl tr.dim{opacity:.55}
.acts{white-space:nowrap}.acts .btn{margin-right:.3rem}
.chip2{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.78rem;background:#e8eeea;margin-left:.3rem}.chip2.ok{background:#dff1e5;color:var(--good)}.chip2.warn{background:#ffe9b8;color:var(--warn)}.chip2.bad{background:#fbdcd9;color:var(--bad)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem;margin-bottom:1rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:.9rem;display:flex;flex-direction:column;gap:.2rem}.big{font-size:1.5rem;font-weight:800}.big small{font-size:.9rem;font-weight:400;color:var(--muted)}
.filters{display:flex;gap:.8rem;align-items:flex-end;margin-bottom:1rem;flex-wrap:wrap}.filters label{margin:0}
.bars{display:flex;gap:.4rem;align-items:flex-end;height:140px;padding:.6rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
.bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:34px;font-size:.7rem;color:var(--muted)}.bar i{display:block;width:22px;background:var(--leaf);border-radius:4px 4px 0 0}
.tabs{display:flex;gap:.3rem;margin-bottom:1rem;border-bottom:2px solid var(--line);overflow-x:auto}.tab{border:0;background:none;padding:.7rem 1rem;cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-2px}.tab.on{border-bottom-color:var(--mango);font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem;max-width:900px}.wide2{grid-column:1/-1}

/* Connexion */
.login{min-height:100vh;display:grid;place-items:center;padding:1rem;background:linear-gradient(160deg,var(--ink) 0 38%,var(--bg) 38%)}
.logincard{background:var(--paper);padding:2rem;border-radius:16px;width:min(400px,100%);box-shadow:0 20px 60px rgba(0,0,0,.25)}.logincard h1{margin-top:.5rem}

/* Notifications */
#toasts{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:50;max-width:min(420px,calc(100vw - 2rem))}
.toast{padding:.8rem 1rem;border-radius:10px;background:var(--ink);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.3)}.toast.err{background:var(--bad)}.toast.warn{background:var(--mango);color:#2b1c00}

/* Ticket (écran et impression thermique 80 mm) */
.ticket{font:13px/1.35 ui-monospace,Consolas,"Courier New",monospace;width:72mm;margin:0 auto;color:#000}.ticket h3{text-align:center;margin:0 0 .3rem;font-size:15px}.ticket p{margin:.1rem 0;text-align:center}
.ticket hr{border:0;border-top:1px dashed #000;margin:.4rem 0}.tl{display:flex;justify-content:space-between;gap:.5rem}.ts{padding-left:.6rem;color:#333}.tl.big{font-weight:800;font-size:15px}.fisc{font-weight:700}
@media print{.side,.mbar,.scrim{display:none!important}.app{display:block}body>*:not(#modal){display:none!important}#modal{position:static;background:none;padding:0;display:block}.dialog{box-shadow:none;padding:0;width:auto}.noprint{display:none!important}@page{size:80mm auto;margin:3mm}}

.cards.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.link-card{text-decoration:none;color:inherit}.link-card:hover{border-color:var(--leaf);box-shadow:0 2px 10px rgba(20,48,31,.12)}
.card.link-card .big{color:var(--ink)}.card .big.bad{color:var(--bad)}.card .big.warn{color:var(--warn)}.card .big.ok{color:var(--good)}
ul.plain{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}ul.plain li{padding-bottom:.4rem;border-bottom:1px dotted var(--line)}ul.plain li:last-child{border:0}
@media (max-width:980px){
  .app,.app.collapsed{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;width:262px;transform:translateX(-102%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .app.open .side{transform:none}.app.open .scrim{display:block;position:fixed;inset:0;background:rgba(10,25,16,.5);z-index:25}
  .app.collapsed .side-brand b,.app.collapsed .side-nav a span,.app.collapsed .side-foot .who,.app.collapsed .side-out,.app.collapsed .net{display:revert}
  .app.collapsed .side-nav a{justify-content:flex-start;padding:.72rem .8rem}.app.collapsed .side-foot{align-items:stretch}.side-toggle{display:none}
  .mbar{display:flex;align-items:center;gap:.8rem;background:var(--ink);color:#fff;padding:.55rem .9rem;position:sticky;top:0;z-index:20;font-size:1.05rem}
  .mbar button{background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;min-width:44px;min-height:44px}
  .view{padding:.9rem}.pos{grid-template-columns:1fr}.ticketpane{position:static}.lines{max-height:none}.grid2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

ol.steps{padding-left:1.2rem;margin:.6rem 0}ol.steps li{margin:.35rem 0}