:root{
  --green-deep:#1b5e45;
  --brown:#5c3a21;
  --cream:#faf6ee;
  --cream-2:#f3ecdd;
  --ink:#2b2620;
  --border:#e3dccb;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--cream);
  color:var(--ink);
}
a{text-decoration:none;color:inherit;}

.layout{display:flex; min-height:100vh;}

.sidebar{
  width:220px;
  background:#241a12;
  color:var(--cream);
  display:flex;
  flex-direction:column;
  padding:24px 0;
  flex-shrink:0;
}
.sidebar-brand{
  font-weight:700;
  letter-spacing:0.05em;
  padding:0 24px 24px;
  font-size:0.95rem;
}
.nav-link{
  padding:12px 24px;
  font-size:0.9rem;
  opacity:0.8;
}
.nav-link:hover{opacity:1; background:rgba(255,255,255,0.05);}
.nav-link.active{opacity:1; background:var(--green-deep); font-weight:600;}
.sidebar-spacer{flex:1;}
.sidebar-user{padding:0 24px 8px; font-size:0.8rem; opacity:0.6;}
.nav-link.logout{opacity:0.6;}

.content{flex:1; padding:32px 40px; overflow-x:auto;}

h1{font-size:1.5rem; margin:0 0 24px;}

/* Login */
.login-page{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; background:var(--cream);
}
.login-box{
  background:#fff; border:1px solid var(--border); border-radius:8px;
  padding:40px; width:340px;
}
.login-box h1{font-size:1.2rem; text-align:center;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.85rem; margin-bottom:6px; opacity:0.7;}
.field input{
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:4px; font-size:0.95rem;
}
.btn{
  display:inline-block; padding:10px 20px; border-radius:4px;
  border:none; background:var(--green-deep); color:#fff;
  font-weight:600; cursor:pointer; font-size:0.9rem;
}
.btn-block{width:100%;}
.error-msg{color:#b3261e; font-size:0.85rem; margin-bottom:12px;}

/* Dashboard */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:32px;}
.stat-card{
  background:#fff; border:1px solid var(--border); border-radius:8px; padding:20px;
}
.stat-card .label{font-size:0.8rem; opacity:0.6; margin-bottom:6px;}
.stat-card .value{font-size:1.8rem; font-weight:700; color:var(--green-deep);}
.popular-list{background:#fff; border:1px solid var(--border); border-radius:8px; padding:20px;}
.popular-list table{width:100%; border-collapse:collapse;}
.popular-list td{padding:8px 0; border-bottom:1px solid var(--border);}

/* Kanban */
.kanban{display:flex; gap:16px; align-items:flex-start; overflow-x:auto;}
.kanban-column{
  background:#fff; border:1px solid var(--border); border-radius:8px;
  width:240px; flex-shrink:0; padding:12px;
}
.kanban-column h3{font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em; margin:0 0 12px; opacity:0.7;}
.order-card{
  background:var(--cream-2); border-radius:6px; padding:12px; margin-bottom:10px;
  font-size:0.85rem;
}
.order-card .order-num{font-weight:700; margin-bottom:4px;}
.order-card select{width:100%; margin-top:8px; padding:6px; border-radius:4px; border:1px solid var(--border);}
.payment-badge{font-size:0.78rem; padding:4px 8px; border-radius:4px; margin-top:6px; display:inline-block;}
.payment-badge.paid{background:#e3f3ea; color:var(--green-deep);}
.payment-badge.unpaid{background:#fdf0e3; color:#a85d1f;}
.btn-small{padding:5px 10px; font-size:0.78rem;}

/* Menu management */
.category-block{background:#fff; border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:20px;}
.category-block h2{font-size:1.1rem; margin:0 0 12px;}
.dish-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border);}
.dish-row.unavailable{opacity:0.45;}
.form-inline{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.form-inline input{padding:8px; border:1px solid var(--border); border-radius:4px; font-size:0.85rem;}

/* Tables / QR codes */
.table-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px;}
.table-card{
  background:#fff; border:1px solid var(--border); border-radius:8px;
  padding:16px; text-align:center;
}
.table-card h3{margin:0 0 4px; font-size:1rem;}
.table-card img{margin:10px 0; border-radius:4px;}
.table-card .link-text{font-size:0.7rem; opacity:0.5; word-break:break-all; margin-bottom:10px;}

/* Reports */
.report-filters{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:8px;}
.range-tabs{display:flex; gap:6px;}
.range-tab{
  padding:8px 14px; border:1px solid var(--border); border-radius:6px;
  font-size:0.85rem; text-decoration:none; color:inherit; background:#fff;
}
.range-tab.active{background:var(--green-deep); color:#fff; border-color:var(--green-deep);}
.custom-range-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:0.85rem;}
.custom-range-form input{padding:6px; border:1px solid var(--border); border-radius:4px; margin-left:6px;}
.range-label{opacity:0.6; font-size:0.85rem; margin:0 0 20px;}

.report-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px; margin-bottom:20px;}
.report-block{background:#fff; border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:20px;}
.report-block h2{font-size:1.05rem; margin:0 0 14px;}
.report-table{width:100%; border-collapse:collapse; font-size:0.9rem;}
.report-table th{text-align:left; padding:8px 6px; border-bottom:2px solid var(--border); opacity:0.6; font-weight:600; font-size:0.8rem;}
.report-table td{padding:8px 6px; border-bottom:1px solid var(--border);}
.report-table .empty-row{opacity:0.5; text-align:center; padding:20px 6px;}

/* Sidebar search */
.sidebar-search{padding:0 0 12px;}
.sidebar-search input{
  width:100%; padding:8px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08); color:#fff; font-size:0.85rem;
}
.sidebar-search input::placeholder{color:rgba(255,255,255,0.5);}

/* Order detail */
.order-detail-meta{
  background:#fff; border:1px solid var(--border); border-radius:8px; padding:20px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px;
  margin-bottom:20px; font-size:0.9rem;
}
.order-detail-totals{margin-top:16px; text-align:right; font-size:0.95rem;}
.order-detail-totals div{margin-bottom:6px;}
.order-detail-grand-total{font-size:1.1rem; border-top:2px solid var(--border); padding-top:10px; margin-top:10px;}

/* Pagination */
.pagination{display:flex; align-items:center; gap:14px; margin-top:20px;}