/* =====================================================================
   Govantes Bistro — Global Stylesheet (v2 redesign)
   Poppins · warm palette · rounded · soft shadows
   Matches /design reference (Ordering App · Admin · Cashier/Kitchen)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  --brown:#3a2015;
  --brown2:#2c1810;
  --brown-warm:#5A2E1A;
  --brand:#E65A1C;          /* orange */
  --brand-dark:#cf4d15;
  --brand-soft:#fdeee4;
  --amber:#FFC36B;
  --gold:#b6800f;
  --ink:#2b1a10;
  --ink-2:#4a382c;
  --muted:#8a7a6d;
  --line:#eee4d8;
  --cream:#F7F2EB;
  --bg:#f4ece1;
  --card:#FFFFFF;
  --green:#1f9d55;
  --green-soft:#e6f6ec;
  --red:#d64545;
  --red-soft:#fbe6e6;
  --amber-txt:#c96a12;
  --amber-soft:#fff0e0;
  --blue:#2f7bd8;
  --blue-soft:#e7f0fd;
  --radius:16px;
  --radius-sm:11px;
  --radius-xs:9px;
  --shadow:0 6px 18px -12px rgba(90,46,26,.4);
  --shadow-lg:0 30px 70px -30px rgba(90,46,26,.5);
  --sidebar:#3a2015;
  --font:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;font-weight:700}
.muted{color:var(--muted)}
.small{font-size:.8rem}
code{background:var(--brand-soft);padding:1px 6px;border-radius:6px;font-size:.85em;color:var(--brand-dark)}
img{max-width:100%}

/* ---------- Layout ---------- */
.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:radial-gradient(120% 90% at 50% 0%,#fbf6ef 0%,#f1e5d6 60%,#ecdcc8 100%)}
.container{max-width:1240px;margin:0 auto;padding:0 1rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.45rem;justify-content:center;border:1px solid transparent;background:var(--cream);color:var(--ink);
  padding:.6rem 1rem;border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;cursor:pointer;transition:transform .1s,filter .15s,background .15s;text-decoration:none;line-height:1.1;font-family:inherit}
.btn:hover{text-decoration:none;filter:brightness(1.03)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand);color:#fff;filter:brightness(1.06)}
.btn-success{background:var(--green);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-warning{background:var(--amber);color:var(--brown-warm)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:var(--cream);color:var(--brand)}
.btn-outline{background:#fff;border-color:var(--brand);color:var(--brand)}
.btn-sm{padding:.42rem .8rem;font-size:.78rem;border-radius:var(--radius-xs)}
.btn-lg{padding:.85rem 1.4rem;font-size:.95rem;width:100%;border-radius:14px}
.btn-icon{padding:.4rem .5rem;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:var(--radius-xs)}
.btn-icon:hover{background:var(--cream);color:var(--brand);border-color:var(--brand)}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none}
.btn-block{width:100%}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.25rem;box-shadow:var(--shadow)}
.card+.card{margin-top:1rem}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}

/* ---------- Stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.15rem;box-shadow:var(--shadow)}
.stat .label{font-size:.72rem;color:var(--muted);font-weight:500;letter-spacing:.02em}
.stat .value{font-size:1.7rem;font-weight:700;margin-top:.3rem;color:var(--ink);line-height:1}
.stat .trend{font-size:.75rem;margin-top:.35rem;font-weight:600}
.stat .trend.up{color:var(--green)} .stat .trend.down{color:var(--red)}
.stat.accent{border-left:4px solid var(--brand)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
table.data{width:100%;border-collapse:collapse;background:#fff;font-size:.82rem}
table.data th{background:var(--cream);text-align:left;padding:.7rem .9rem;font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--line);white-space:nowrap;text-transform:uppercase;font-size:.68rem;letter-spacing:.4px}
table.data td{padding:.75rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover td{background:#fdf9f4}
table.data tfoot th{background:#fff;text-transform:none;color:var(--ink);font-size:.82rem}
.text-right{text-align:right}.text-center{text-align:center}
.nowrap{white-space:nowrap}
.row-actions{display:flex;gap:.35rem;justify-content:flex-end}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.68rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.badge-success{background:var(--green-soft);color:var(--green)}
.badge-danger{background:var(--red-soft);color:var(--red)}
.badge-warning{background:var(--amber-soft);color:var(--amber-txt)}
.badge-info{background:var(--blue-soft);color:var(--blue)}
.badge-primary{background:var(--brand-soft);color:var(--brand)}
.badge-muted{background:#efe7dd;color:var(--muted)}
.badge-gold{background:#fff0d6;color:var(--gold)}

/* ---------- Forms ---------- */
.form-group{margin-bottom:1rem}
label{display:block;font-weight:600;font-size:.8rem;margin-bottom:.4rem;color:var(--ink-2)}
label .req{color:var(--red)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],
input[type=date],input[type=tel],select,textarea{
  width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.85rem;background:#fff;color:var(--ink);transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(230,90,28,.1)}
textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.help{font-size:.74rem;color:var(--muted);margin-top:.3rem}
.field-error{color:var(--red);font-size:.74rem;margin-top:.25rem}

/* ---------- Filter/toolbar ---------- */
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.toolbar form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;flex:1}
.toolbar .search{flex:1;min-width:180px}
.toolbar input[type=search]{background:var(--cream);border-color:transparent}
.toolbar select{width:auto;min-width:130px}
.spacer{flex:1}

/* ---------- Pagination ---------- */
.pagination-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.pagination-info{font-size:.78rem;color:var(--muted)}
.pagination{display:flex;gap:.35rem;list-style:none;margin:0;padding:0}
.pagination li a{display:inline-flex;min-width:32px;height:32px;align-items:center;justify-content:center;padding:0 .5rem;
  border:1px solid var(--line);border-radius:var(--radius-xs);color:var(--ink);font-size:.8rem;font-weight:600;background:#fff}
.pagination li.active a{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination li.disabled a{opacity:.4;pointer-events:none}
.pagination li a:hover{text-decoration:none;background:var(--cream)}
.pagination li.active a:hover{background:var(--brand)}

/* ---------- Alerts / toast ---------- */
.alert{padding:.8rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.85rem;border:1px solid transparent;font-weight:500}
.alert-success{background:var(--green-soft);color:#177a41;border-color:#bfe6cd}
.alert-danger{background:var(--red-soft);color:#b3322b;border-color:#f2c7c4}
.alert-warning{background:var(--amber-soft);color:var(--amber-txt);border-color:#f3ddb0}
.alert-info{background:var(--blue-soft);color:#2c6394;border-color:#c6ddf0}

#toast-wrap{position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;max-width:340px}
.toast{background:#fff;border-left:4px solid var(--brand);box-shadow:var(--shadow-lg);border-radius:12px;padding:.8rem 1rem;
  display:flex;gap:.6rem;align-items:flex-start;animation:slidein .25s ease;font-size:.84rem}
.toast.success{border-color:var(--green)} .toast.error{border-color:var(--red)} .toast.info{border-color:var(--blue)} .toast.warning{border-color:var(--amber)}
.toast .tclose{margin-left:auto;cursor:pointer;color:var(--muted);background:none;border:none;font-size:1rem}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(30,16,8,.55);display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:1rem;animation:fade .15s ease;backdrop-filter:blur(2px)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:20px;width:100%;max-width:560px;max-height:92vh;overflow:auto;box-shadow:var(--shadow-lg)}
.modal-lg{max-width:820px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0}
.modal-body{padding:1.3rem}
.modal-foot{padding:1rem 1.3rem;border-top:1px solid var(--line);display:flex;gap:.6rem;justify-content:flex-end}
.modal-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--muted);line-height:1}

/* ---------- Empty / loading ---------- */
.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty-state .empty-icon{font-size:2.6rem;margin-bottom:.5rem}
.empty-state h2{color:var(--ink-2);margin:.3rem 0;font-size:1.15rem}
.loading{display:inline-block;width:22px;height:22px;border:3px solid var(--brand-soft);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}
.loading-lg{width:40px;height:40px;border-width:4px}
@keyframes spin{to{transform:rotate(360deg)}}
.center-load{display:flex;justify-content:center;padding:2rem}

/* ---------- Thumbnails ---------- */
.thumb{width:42px;height:42px;border-radius:var(--radius-xs);object-fit:cover;background:var(--cream);border:1px solid var(--line)}
.thumb-lg{width:80px;height:80px}

/* Variation option picker (customer detail sheet + POS modal) */
.var-opts{display:flex;flex-direction:column;gap:.5rem}
.var-opt{display:flex;align-items:center;justify-content:space-between;gap:.7rem;width:100%;
  border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:.7rem .9rem;cursor:pointer;font-family:inherit;font-size:.9rem;color:var(--ink);text-align:left}
.var-opt b{color:var(--ink);font-weight:700}
.var-opt.on{border-color:var(--brand);background:var(--brand-soft)}
.var-opt.on b{color:var(--brand)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.flex{display:flex;gap:.6rem;align-items:center}
.flex-between{display:flex;gap:.6rem;align-items:center;justify-content:space-between}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-2{margin-bottom:1rem}
.hidden{display:none!important}

@media(max-width:720px){
  .form-row,.form-row-3,.grid-2,.grid-3{grid-template-columns:1fr}
}