/* ==========================================================================
   Restaurant POS — design épuré, typographie Montserrat
   ========================================================================== */

:root{
  --bg:            #FAFAF7;
  --surface:       #FFFFFF;
  --ink:           #1E1B16;
  --ink-soft:      #6B655C;
  --line:          #EDE9E1;
  --accent:        #C9622C;   /* terracotta */
  --accent-dark:   #A94F21;
  --accent-soft:   #FBEBE0;
  --success:       #2F7D57;
  --success-soft:  #E4F3EA;
  --danger:        #C0392B;
  --danger-soft:   #FBE8E5;
  --radius-sm:     10px;
  --radius:        16px;
  --radius-lg:     22px;
  --shadow:        0 2px 10px rgba(30,27,22,0.05), 0 1px 2px rgba(30,27,22,0.04);
  --shadow-lg:      0 12px 32px rgba(30,27,22,0.10);
}

*{ box-sizing:border-box; }

body{
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-weight:400;
  letter-spacing:-0.01em;
}

h1,h2,h3,h4,h5,h6,.brand{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--ink);
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-dark); }

/* ---------- Layout ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:250px;
  flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  padding:0;
}
.sidebar::-webkit-scrollbar{ width:4px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

.sidebar .brand{
  font-size:1.15rem;
  padding:28px 18px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.sidebar .brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  display:inline-block;
}

.nav-section-title{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-soft);
  font-weight:700;
  margin:18px 12px 8px;
}

.nav-link-pos{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-weight:600;
  font-size:.88rem;
  margin-bottom:2px;
  transition:background .15s ease, color .15s ease;
}
.nav-link-pos:hover{ background:var(--accent-soft); color:var(--accent-dark); }
.nav-link-pos.active{ background:var(--ink); color:#fff; }
.nav-link-pos .icon{ width:18px; text-align:center; }

.sidebar .user-box{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.82rem;
}
.sidebar .user-box .name{ font-weight:700; }
.sidebar .user-box .role{
  display:inline-block;
  background:var(--accent-soft);
  color:var(--accent-dark);
  padding:2px 8px;
  border-radius:4px;
  font-size:.72rem;
  font-weight:700;
  margin-bottom:4px;
}

.sidebar-nav-scroll{
  padding:0 18px;
}

.main-content{ flex:1; min-width:0; padding:28px 34px 60px; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:26px;
}
.topbar h1{ font-size:1.5rem; margin:0; }
.topbar .subtitle{ color:var(--ink-soft); font-size:.88rem; margin-top:2px; }

/* ---------- Cards ---------- */
.card-pos{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.stat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  box-shadow:var(--shadow);
}
.stat-card .label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-soft);
  font-weight:700;
}
.stat-card .value{
  font-size:1.7rem;
  font-weight:800;
  margin-top:6px;
  letter-spacing:-0.02em;
}
.stat-card .icon-badge{
  width:38px;height:38px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:1.05rem;
}

/* ---------- Buttons ---------- */
.btn-pos{
  font-weight:700;
  border-radius:var(--radius-sm);
  padding:10px 18px;
  font-size:.88rem;
  border:1px solid transparent;
  transition:all .15s ease;
}
.btn-pos-accent{ background:var(--accent); color:#fff; }
.btn-pos-accent:hover{ background:var(--accent-dark); color:#fff; }
.btn-pos-dark{ background:var(--ink); color:#fff; }
.btn-pos-dark:hover{ background:#000; color:#fff; }
.btn-pos-outline{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-pos-outline:hover{ background:var(--bg); }
.btn-pos-success{ background:var(--success); color:#fff; }
.btn-pos-success:hover{ background:#245f42; color:#fff; }
.btn-pos-ghost{ background:transparent; color:var(--ink-soft); border:none; }

/* ---------- Forms ---------- */
.form-control, .form-select{
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  padding:10px 14px;
  font-family:'Montserrat', sans-serif;
  font-size:.9rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
label{ font-weight:600; font-size:.82rem; margin-bottom:4px; }

/* ---------- Tables ---------- */
.table-pos{ background:var(--surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.table-pos thead th{
  background:var(--bg);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-soft);
  font-weight:700;
  border-bottom:1px solid var(--line);
  padding:12px 16px;
}
.table-pos tbody td{ padding:13px 16px; vertical-align:middle; border-bottom:1px solid var(--line); font-size:.88rem; }
.table-pos tbody tr:last-child td{ border-bottom:none; }

.badge-pos{
  padding:4px 10px;
  border-radius:20px;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.badge-success{ background:var(--success-soft); color:var(--success); }
.badge-danger{ background:var(--danger-soft); color:var(--danger); }
.badge-neutral{ background:var(--line); color:var(--ink-soft); }

/* ---------- Caisse (POS screen) ---------- */
.pos-grid{ display:flex; gap:22px; align-items:flex-start; }
.pos-menus{ flex:1; min-width:0; }
.pos-cart{ width:380px; flex-shrink:0; }

.category-pill{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:30px;
  padding:9px 18px;
  font-weight:700;
  font-size:.85rem;
  white-space:nowrap;
  cursor:pointer;
  transition:all .15s ease;
}
.category-pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.category-pill:hover:not(.active){ border-color:var(--accent); color:var(--accent-dark); }

.menu-tile{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  height:100%;
}
.menu-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.menu-tile .thumb{
  width:100%; height:100px;
  border-radius:var(--radius-sm);
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
  overflow:hidden;
  margin-bottom:10px;
}
.menu-tile .thumb img{ width:100%; height:100%; object-fit:cover; }
.menu-tile .mname{ font-weight:700; font-size:.86rem; line-height:1.25; }
.menu-tile .mprice{ color:var(--accent-dark); font-weight:800; font-size:.86rem; margin-top:4px; }

.cart-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:20px;
  max-height:calc(100vh - 40px);
}
.cart-header{ padding:18px 20px; border-bottom:1px solid var(--line); font-weight:800; display:flex; justify-content:space-between; align-items:center; }
.cart-items{ flex:1; overflow-y:auto; padding:8px 14px; min-height:120px; }
.cart-item{ display:flex; align-items:center; justify-content:space-between; padding:11px 6px; border-bottom:1px solid var(--line); }
.cart-item:last-child{ border-bottom:none; }
.cart-item .cname{ font-weight:700; font-size:.84rem; }
.cart-item .cunit{ color:var(--ink-soft); font-size:.72rem; }
.qty-control{ display:flex; align-items:center; gap:8px; }
.qty-btn{
  width:24px; height:24px; border-radius:7px;
  border:1px solid var(--line); background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; cursor:pointer; line-height:1;
}
.qty-btn:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-dark); }

.cart-footer{ padding:16px 20px 20px; border-top:1px solid var(--line); }
.cart-total-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.cart-total-row .lbl{ color:var(--ink-soft); font-weight:600; font-size:.85rem; }
.cart-total-row .amt{ font-size:1.5rem; font-weight:800; }

.empty-cart{ text-align:center; color:var(--ink-soft); padding:40px 10px; font-size:.85rem; }

/* payment method chips */
.pay-chip{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 8px;
  text-align:center;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
.pay-chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Login ---------- */
.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 20% 20%, #FFF3EA 0%, var(--bg) 55%);
}
.login-card{
  width:100%; max-width:380px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:40px 34px;
}
.login-card .logo-dot{
  width:44px;height:44px;border-radius:14px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:1.3rem; margin-bottom:18px;
}

/* ---------- Receipt (thermal) ---------- */
.receipt-wrap{ display:flex; justify-content:center; padding:30px 10px; }
.receipt-80mm{
  width:302px;
  background:#fff;
  padding:16px 14px;
  font-family:'Courier New', monospace;
  font-size:12px;
  color:#111;
  box-shadow:var(--shadow-lg);
}
.receipt-80mm .center{ text-align:center; }
.receipt-80mm .divider{ border-top:1px dashed #999; margin:8px 0; }
.receipt-80mm table{ width:100%; }
.receipt-80mm td{ padding:2px 0; vertical-align:top; }

@media print{
  body *{ visibility:hidden; }
  .receipt-80mm, .receipt-80mm *{ visibility:visible; }
  .receipt-80mm{ position:absolute; top:0; left:0; box-shadow:none; width:80mm; }
  .no-print{ display:none !important; }
}

/* ---------- Misc ---------- */
.search-input{
  border-radius:30px;
  border:1px solid var(--line);
  padding:9px 16px;
  font-size:.86rem;
  background:var(--surface);
}
.page-actions{ display:flex; gap:10px; }
.section-title{ font-weight:800; font-size:1.02rem; margin-bottom:14px; }

/* ---------- Confirm Modal ---------- */
.confirm-modal .modal-content{
  border:none;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.confirm-modal .modal-body{
  padding:32px 28px 24px;
  text-align:center;
}
.confirm-modal .confirm-icon{
  width:56px;height:56px;
  border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  margin-bottom:16px;
}
.confirm-modal .confirm-icon.danger{ background:#FBE8E5; color:var(--danger); }
.confirm-modal .confirm-icon.warning{ background:#FFF3E0; color:#C9622C; }
.confirm-modal .confirm-icon.info{ background:#E3F2FD; color:#1565C0; }
.confirm-modal .confirm-icon.success{ background:var(--success-soft); color:var(--success); }
.confirm-modal .confirm-title{
  font-weight:800;
  font-size:1.1rem;
  margin-bottom:8px;
  color:var(--ink);
}
.confirm-modal .confirm-message{
  color:var(--ink-soft);
  font-size:.88rem;
  line-height:1.5;
  margin-bottom:24px;
}
.confirm-modal .btn-confirm{
  padding:10px 24px;
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:.88rem;
  border:none;
  transition:all .15s ease;
}
.confirm-modal .btn-confirm-danger{ background:var(--danger); color:#fff; }
.confirm-modal .btn-confirm-danger:hover{ background:#A93226; color:#fff; }
.confirm-modal .btn-confirm-warning{ background:var(--accent); color:#fff; }
.confirm-modal .btn-confirm-warning:hover{ background:var(--accent-dark); color:#fff; }
.confirm-modal .btn-confirm-success{ background:var(--success); color:#fff; }
.confirm-modal .btn-confirm-success:hover{ background:#245f42; color:#fff; }
.confirm-modal .btn-cancel{
  padding:10px 24px;
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:.88rem;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  transition:all .15s ease;
}
.confirm-modal .btn-cancel:hover{ background:var(--bg); }

/* ---------- Mobile Topbar ---------- */
.mobile-topbar{
  display:none;
}

.hamburger-btn{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  color:var(--ink);
  cursor:pointer;
  transition:background .15s ease;
  flex-shrink:0;
}
.hamburger-btn:hover{ background:var(--accent-soft); color:var(--accent-dark); }

.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:999;
  backdrop-filter:blur(2px);
}

/* ---------- Tablet (768px - 1024px) ---------- */
@media (min-width:768px) and (max-width:1024px){
  .sidebar{
    width:200px;
    padding:24px 14px;
  }
  .main-content{ padding:20px 20px 60px; }
  .pos-cart{ width:320px; }
}

/* ---------- Mobile (< 768px) ---------- */
@media (max-width:767.98px){
  .mobile-topbar{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
  }
  .mobile-topbar .topbar h1{ margin:0; }

  .sidebar{
    position:fixed;
    left:0;top:0;
    width:260px;
    height:100vh;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .3s ease;
    box-shadow:none;
  }
  .sidebar.open{
    transform:translateX(0);
    box-shadow:4px 0 20px rgba(0,0,0,.15);
  }
  .sidebar-overlay.show{
    display:block;
  }

  .main-content{ padding:16px 16px 80px; }

  .pos-grid{
    flex-direction:column;
  }
  .pos-cart{
    width:100%;
  }

  .topbar{
    flex-wrap:wrap;
    gap:8px;
  }
  .topbar h1{ font-size:1.2rem; }

  .stat-card .value{ font-size:1.3rem; }

  .table-pos{ overflow-x:auto; display:block; }

  .menu-tile .thumb{ height:80px; }

  .login-card{
    margin:16px;
    padding:24px 20px;
  }

  .category-pill{ padding:7px 14px; font-size:.78rem; }

  .cart-header{ padding:14px 16px; }
  .cart-items{ padding:6px 10px; }
  .cart-footer{ padding:12px 16px 16px; }
  .cart-total-row .amt{ font-size:1.2rem; }

  .page-actions{ flex-wrap:wrap; }

  .receipt-80mm{ width:100%; max-width:302px; }

  .search-input{ font-size:.82rem; padding:8px 12px; }
}