/* Marduino POS — Thème teal/orange, responsive + RTL + print */
:root{
  --teal-950:#083b38; --teal-800:#0e5f5a; --teal:#0e9384; --teal-100:#ccfbf1;
  --orange:#f97316; --orange-d:#ea580c;
  --bg:#f1f5f9; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --green:#16a34a; --red:#dc2626; --amber:#d97706;
  --radius:14px; --shadow:0 2px 10px rgba(2,32,30,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
a{color:var(--teal-800)}
.layout{display:flex;min-height:100vh}
/* ---- Sidebar ---- */
.sidebar{width:248px;background:linear-gradient(180deg,var(--teal-950),#0a2e2c);color:#e6fffa;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0;z-index:40}
.brand{display:flex;gap:10px;align-items:center;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand-logo{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.brand-name{font-weight:800;font-size:18px}
.brand-sub{font-size:11px;opacity:.75}
.nav{padding:10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#d7f5f0;text-decoration:none;font-weight:600}
.nav-item:hover{background:rgba(255,255,255,.08)}
.nav-item.active{background:var(--teal);color:#fff}
.nav-ico{width:22px;text-align:center}
.side-foot{padding:10px;border-top:1px solid rgba(255,255,255,.12)}
/* ---- Main ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;background:var(--card);padding:12px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.page-title{margin:0;font-size:20px;flex:1}
.top-actions{display:flex;align-items:center;gap:10px}
.burger{display:none;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;font-size:18px}
.net-badge{font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px;background:#fee2e2;color:#991b1b}
.net-badge.on{background:#dcfce7;color:#166534}
.lang-sw{text-decoration:none;font-weight:700;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--teal-800);background:#fff}
.user-chip{font-size:13px;color:var(--muted)}
.content{padding:20px;flex:1;max-width:1400px;width:100%;margin:0 auto}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:12px}
/* ---- Cards / grids ---- */
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.stat{display:flex;gap:12px;align-items:center}
.stat .ico{font-size:26px;background:var(--teal-100);border-radius:12px;padding:10px}
.stat.warn .ico{background:#ffedd5}
.stat .lbl{font-size:13px;color:var(--muted)}
.stat .val{font-size:24px;font-weight:800}
.up{color:var(--green);font-size:12px} .down{color:var(--red);font-size:12px}
/* ---- Tables ---- */
.tbl-wrap{overflow-x:auto;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start}
.tbl th{background:#f8fafc;font-weight:700;color:var(--muted);white-space:nowrap}
.tbl tr:hover td{background:#f8fafc}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.b-green{background:#dcfce7;color:#166534}.b-red{background:#fee2e2;color:#991b1b}
.b-amber{background:#fef3c7;color:#92400e}.b-blue{background:#dbeafe;color:#1e40af}.b-gray{background:#f1f5f9;color:#475569}
/* ---- Forms / buttons ---- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.fld label{font-weight:700;font-size:13px;color:var(--muted)}
.inp,select.inp,textarea.inp{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px;width:100%;background:#fff;font-family:inherit}
.inp:focus{outline:2px solid var(--teal);border-color:var(--teal)}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:10px;padding:10px 18px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit}
.btn-pri{background:var(--orange);color:#fff} .btn-pri:hover{background:var(--orange-d)}
.btn-teal{background:var(--teal);color:#fff} .btn-teal:hover{background:var(--teal-800)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:8px}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
/* ---- Flash / alerts ---- */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-weight:600}
.flash-success{background:#dcfce7;color:#166534}.flash-error{background:#fee2e2;color:#991b1b}.flash-warn{background:#fef3c7;color:#92400e}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:12px}
.alert-warn{background:#fff7ed;border:1px solid #fdba74;color:#9a3412}
/* ---- Login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--teal-950),var(--teal-800));padding:20px}
.login-card{background:#fff;border-radius:18px;padding:32px;width:100%;max-width:400px;box-shadow:0 10px 40px rgba(0,0,0,.25);text-align:center}
.login-card .logo-big{width:72px;height:72px;object-fit:contain;margin-bottom:10px}
/* ---- Caisse ---- */
.pos{display:grid;grid-template-columns:1fr 380px;gap:14px;align-items:start}
.cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cat{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 14px;font-weight:700;cursor:pointer}
.cat.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;text-align:center}
.pcard:hover{border-color:var(--teal);box-shadow:var(--shadow)}
.pcard .pn{font-weight:700;font-size:13px;margin:6px 0}
.pcard .pp{color:var(--teal-800);font-weight:800}
.pcard .ps{font-size:11px;color:var(--muted)}
.ticket{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;position:sticky;top:76px}
.ticket h3{margin:0 0 10px}
.tline{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
.tline .n{flex:1}.tline .q{display:flex;align-items:center;gap:6px}
.qbtn{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:#f8fafc;font-weight:800;cursor:pointer}
.ttotal{display:flex;justify-content:space-between;font-size:20px;font-weight:800;margin:10px 0}
.pay-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.pay-btns .btn{justify-content:center}
.big-validate{width:100%;font-size:18px;padding:14px;margin-top:8px}
/* ---- Print ticket 80mm ---- */
@media print{
  .sidebar,.topbar,.foot,.no-print{display:none!important}
  .main{padding:0}.content{padding:0;max-width:none}
  .ticket80{width:72mm;margin:0 auto;font-size:12px;color:#000}
  .ticket80 h2{font-size:15px;text-align:center;margin:4px 0}
  .ticket80 .c{text-align:center}.ticket80 table{width:100%;border-collapse:collapse}
  .ticket80 td{padding:2px 0;vertical-align:top}
  .ticket80 .tot{font-size:15px;font-weight:800;border-top:1px dashed #000;margin-top:6px;padding-top:6px}
}
@media screen{ .ticket80{max-width:340px;margin:0 auto;background:#fff;padding:16px;border:1px solid var(--line)} }
/* ---- Responsive ---- */
@media(max-width:1100px){ .g4{grid-template-columns:repeat(2,1fr)} .pos{grid-template-columns:1fr} .ticket{position:static} }
@media(max-width:760px){
  .sidebar{position:fixed;inset-inline-start:0;transform:translateX(-110%);transition:.2s}
  [dir="rtl"] .sidebar{transform:translateX(110%)}
  .sidebar.open{transform:none}
  .burger{display:block}
  .g4,.g3,.g2,.form-grid{grid-template-columns:1fr}
  .content{padding:12px}
  .user-chip{display:none}
}

/* ================= Caisse v2 (design approuvé) ================= */
.cx2{--cx-accent:#0e9384;--cx-accent-d:#0e5f5a;--cx-bg:#f1f5f9}
.cx2[data-theme="blue"]{--cx-accent:#2563eb;--cx-accent-d:#1d4ed8}
.cx2[data-theme="green"]{--cx-accent:#16a34a;--cx-accent-d:#15803d}
.cx2[data-theme="orange"]{--cx-accent:#f97316;--cx-accent-d:#ea580c}
.cx2[data-theme="violet"]{--cx-accent:#7c3aed;--cx-accent-d:#6d28d9}
.cx2[data-theme="rose"]{--cx-accent:#e11d48;--cx-accent-d:#be123c}
.cx-topbar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:14px;flex-wrap:wrap}
.cx-total{display:flex;align-items:center;gap:10px;background:var(--cx-accent);color:#fff;border-radius:10px;padding:8px 16px}
.cx-total .lbl{font-size:12px;opacity:.85}
.cx-total strong{font-size:20px}
.cx-topfield{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px}
.cx-topfield .lbl{display:block;font-size:11px;color:var(--muted)}
.cx-topfield.grow{flex:1}
.cx-admin{margin-inline-start:auto;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 14px;font-weight:700;text-decoration:none;color:var(--ink)}
.cx-grid{display:grid;grid-template-columns:250px 1fr 230px;grid-template-areas:"left center right";gap:14px;align-items:start}
.cx2[data-keypad="right"] .cx-grid{grid-template-columns:230px 1fr 250px;grid-template-areas:"right center left"}
.cx-left{grid-area:left;display:flex;flex-direction:column;gap:14px}
.cx-center{grid-area:center;display:flex;flex-direction:column;gap:14px;min-width:0}
.cx-right{grid-area:right;display:flex;flex-direction:column;gap:8px;position:sticky;top:76px}
.cx-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.cx-title{margin:0 0 12px;font-size:16px}
.cx-modes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cx-mode{border:1px solid var(--line);background:#f8fafc;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}
.cx-mode.sel{background:var(--cx-accent);color:#fff;border-color:var(--cx-accent)}
.cx-kbdisplay{background:#0f172a;color:#fff;border-radius:10px;padding:10px 12px;font-size:18px;font-weight:800;min-height:46px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.cx-kbdisplay .hint{font-size:11px;font-weight:400;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.cx-key{border:1px solid var(--line);background:#f8fafc;border-radius:10px;padding:12px 0;font-size:16px;font-weight:800;cursor:pointer}
.cx-key.fn{background:#fef3c7}
.cx-key.enter{background:var(--cx-accent);color:#fff;border-color:var(--cx-accent)}
.cx-hint{font-size:12px;color:var(--muted);margin:10px 0 0}
.cx-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cx-cat{border:1px solid var(--line);background:#f8fafc;border-radius:10px;padding:10px 6px;font-weight:700;font-size:13px;cursor:pointer}
.cx-cat.active{background:var(--cx-accent);color:#fff;border-color:var(--cx-accent)}
.cx-searchrow{margin-bottom:10px}
#custList{background:#fff;border:1px solid var(--line);border-radius:8px;z-index:50;max-height:220px;overflow:auto;position:absolute;inset-inline:0;top:100%}
.cx-custinfo{margin:8px 0;font-size:13px;color:var(--muted)}
.cx-thead,.cx-line{display:grid;grid-template-columns:1fr 96px 86px 110px 92px 30px;gap:6px;align-items:center}
.cx-thead{font-size:12px;font-weight:700;color:var(--muted);border-bottom:2px solid var(--line);padding-bottom:6px}
.cx-thead .c-tot,.cx-line .c-tot{text-align:end}
.cx-line{padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px;cursor:pointer}
.cx-line.sel{background:#f0fdfa;outline:1px solid var(--cx-accent);border-radius:8px}
.cx-line .c-des{overflow:hidden}
.cx-line .cx-ref{display:block;font-size:11px;color:var(--muted)}
.cx-line .c-qte,.cx-line .c-rem{display:flex;align-items:center;gap:4px}
.cx-line .c-pu{text-align:end}
.cx-val{cursor:pointer;border-bottom:1px dashed var(--muted)}
.cx-inline-inp{width:100%;padding:4px 6px;font-size:14px}
.cx-underticket{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:13px}
.cx-inline{display:flex;gap:8px;align-items:center}
.cx-comment{font-size:13px;color:var(--muted)}
.cx-prods{column-count:2;column-gap:20px}
.cx-prod{padding:7px 0;cursor:pointer;break-inside:avoid;font-size:14px}
.cx-prod:hover{color:var(--cx-accent-d);font-weight:700}
.cx-more{text-align:center;color:var(--muted);font-size:13px;margin-top:8px}
.act-btn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:var(--shadow);text-align:start;width:100%}
.act-btn:hover{border-color:var(--cx-accent)}
.act-btn.pri{background:var(--cx-accent);color:#fff;border-color:var(--cx-accent)}
.act-btn.danger{color:var(--red)}
.act-btn .ic{font-size:16px}
.act-btn .badge{margin-inline-start:auto}
.cx2[data-iconpos="above"] .act-btn{flex-direction:column;gap:2px;text-align:center;justify-content:center}
.cx2[data-iconpos="above"] .act-btn .badge{margin-inline-start:0}
.cx2[data-iconsize="medium"] .act-btn .ic{font-size:20px}
.cx2[data-iconsize="large"] .act-btn .ic{font-size:26px}
.cx2[data-iconsize="small"] .cx-cat{font-size:13px}
.cx2[data-iconsize="large"] .cx-cat{font-size:16px}
/* modales caisse */
.cx-modal{position:fixed;inset:0;background:rgba(2,32,30,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.cx-modal[hidden]{display:none}
.cx-modal-box{background:#fff;border-radius:16px;padding:20px;width:100%;max-width:520px;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.cx-modal-box h3{margin:0 0 14px}
.cx-modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.cx-paymodes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.cx-pm{border:1px solid var(--line);background:#f8fafc;border-radius:10px;padding:10px 4px;font-weight:700;font-size:13px;cursor:pointer}
.cx-pm.active{background:var(--cx-accent);color:#fff;border-color:var(--cx-accent)}
.cx-radios{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:1100px){
  .cx-grid,.cx2[data-keypad="right"] .cx-grid{grid-template-columns:1fr;grid-template-areas:"left" "center" "right"}
  .cx-right{position:static}
  .cx-thead,.cx-line{grid-template-columns:1fr 84px 76px 96px 84px 26px}
}
@media(max-width:640px){
  .cx-prods{column-count:1}
  .cx-thead{display:none}
  .cx-line{grid-template-columns:auto auto 1fr 26px;grid-template-areas:"des des des x" "qte rem tot tot";row-gap:6px;font-size:13px}
  .cx-line .c-des{grid-area:des;overflow-wrap:anywhere}
  .cx-line .c-qte{grid-area:qte}
  .cx-line .c-rem{grid-area:rem}
  .cx-line .c-tot{grid-area:tot;text-align:end}
  .cx-line .c-x{grid-area:x}
  .cx-line .c-pu{display:none}
  .cx-paymodes{grid-template-columns:1fr 1fr}
}