/* =========================================================================
   Food Court POS - Theme
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --brand:        #ff6b35;
  --brand-dark:   #e2521c;
  --brand-light:  #fff1ea;
  --ink:          #1f2430;
  --ink-soft:     #667085;
  --surface:      #ffffff;
  --bg:           #f4f5f9;
  --border:       #e7e9f0;
  --success:      #16a34a;
  --success-bg:   #e9f9ef;
  --warning:      #d97706;
  --warning-bg:   #fff6e5;
  --danger:       #dc2626;
  --danger-bg:    #fdecec;
  --info:         #2563eb;
  --sidebar-bg:   #171b26;
  --sidebar-ink:  #c7cbdb;
  --sidebar-active: #ff6b35;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(20,20,43,.06);
  --shadow-lg: 0 12px 30px rgba(20,20,43,.12);
}

*{box-sizing:border-box}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
}
h1,h2,h3,h4,h5,.brand-font{font-family:'Poppins',sans-serif;}

a{text-decoration:none;}

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

.sidebar{
  width:250px;
  flex-shrink:0;
  background:var(--sidebar-bg);
  color:var(--sidebar-ink);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; bottom:0; left:0;
  z-index:1030;
  transition:transform .25s ease;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding:22px 20px;
  color:#fff;
  font-weight:700;
  font-size:1.15rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .brand .logo-badge{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),#ff9457);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
}
.sidebar nav{flex:1; padding:14px 12px; overflow-y:auto;}
.sidebar .nav-section-title{
  text-transform:uppercase; font-size:.7rem; letter-spacing:.08em;
  color:#6b7286; margin:16px 10px 8px; font-weight:600;
}
.sidebar .nav-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:10px;
  color:var(--sidebar-ink); font-weight:500; font-size:.92rem;
  margin-bottom:2px;
}
.sidebar .nav-link i{width:18px; text-align:center; font-size:1rem;}
.sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar .nav-link.active{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff;
  box-shadow:0 4px 12px rgba(255,107,53,.35);
}
.sidebar .sidebar-footer{
  padding:14px 18px; border-top:1px solid rgba(255,255,255,.08);
  font-size:.78rem; color:#7a8094;
}

.main-content{
  margin-left:250px;
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:14px 26px;
  display:flex; align-items:center; justify-content:between;
  gap:16px;
  position:sticky; top:0; z-index:1020;
}
.topbar .page-title{font-weight:700; font-size:1.25rem; margin:0;}
.topbar .page-sub{color:var(--ink-soft); font-size:.85rem; margin:0;}
.topbar .spacer{flex:1;}
.topbar .clock{font-weight:600; color:var(--ink-soft); font-size:.85rem;}
.sidebar-toggle{display:none;}

.content-area{padding:24px 26px 60px;}

/* ---------------------------------------------------------------------
   Cards / widgets
   ------------------------------------------------------------------- */
.card{border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.stat-card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:20px 22px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:flex; align-items:center; gap:16px;
}
.stat-card .icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem; color:#fff; flex-shrink:0;
}
.stat-card .value{font-size:1.55rem; font-weight:800; font-family:'Poppins',sans-serif; line-height:1.1;}
.stat-card .label{color:var(--ink-soft); font-size:.82rem; font-weight:500;}

.bg-grad-orange{background:linear-gradient(135deg,#ff6b35,#ff9457);}
.bg-grad-green{background:linear-gradient(135deg,#16a34a,#4ade80);}
.bg-grad-blue{background:linear-gradient(135deg,#2563eb,#60a5fa);}
.bg-grad-purple{background:linear-gradient(135deg,#7c3aed,#a78bfa);}

/* ---------------------------------------------------------------------
   Table grid (dine-in floor view)
   ------------------------------------------------------------------- */
.table-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:18px;}
.table-card{
  border-radius:16px;
  padding:20px 16px;
  text-align:center;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
  position:relative;
  overflow:hidden;
}
.table-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.table-card::before{content:''; position:absolute; top:0; left:0; right:0; height:5px;}
.table-card.available::before{background:var(--success);}
.table-card.running::before{background:var(--warning);}
.table-card.billed::before{background:var(--info);}
.table-card .t-icon{font-size:1.9rem; margin-bottom:8px;}
.table-card.available .t-icon{color:var(--success);}
.table-card.running .t-icon{color:var(--warning);}
.table-card.billed .t-icon{color:var(--info);}
.table-card .t-no{font-weight:800; font-size:1.15rem; font-family:'Poppins',sans-serif;}
.table-card .t-cap{color:var(--ink-soft); font-size:.78rem; margin-top:2px;}
.table-card .t-status{
  display:inline-block; margin-top:10px; padding:3px 12px; border-radius:20px;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.table-card.available .t-status{background:var(--success-bg); color:var(--success);}
.table-card.running .t-status{background:var(--warning-bg); color:var(--warning);}
.table-card.billed .t-status{background:#e8f0fe; color:var(--info);}

.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;}

/* ---------------------------------------------------------------------
   Order screen (KOT builder)
   ------------------------------------------------------------------- */
.order-layout{display:flex; gap:20px; align-items:flex-start;}
.menu-panel{flex:1; min-width:0;}
.cart-panel{
  width:380px; flex-shrink:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); position:sticky; top:86px;
  display:flex; flex-direction:column; max-height:calc(100vh - 110px);
}
.cart-panel .cart-header{padding:18px 20px; border-bottom:1px solid var(--border);}
.cart-panel .cart-items{flex:1; overflow-y:auto; padding:8px 14px;}
.cart-panel .cart-footer{padding:16px 20px; border-top:1px solid var(--border); background:#fafbfe; border-radius:0 0 var(--radius) var(--radius);}

.cat-pills{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.cat-pill{
  padding:9px 18px; border-radius:24px; border:1px solid var(--border);
  background:var(--surface); font-weight:600; font-size:.85rem; color:var(--ink-soft); cursor:pointer;
}
.cat-pill.active{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 4px 10px rgba(255,107,53,.35);}

.item-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px;}
.item-card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px;
  cursor:pointer; transition:.15s;
}
.item-card:hover{border-color:var(--brand); box-shadow:0 6px 16px rgba(255,107,53,.15); transform:translateY(-2px);}
.item-card .veg-dot{width:12px;height:12px;border:2px solid var(--success); border-radius:2px; display:inline-block; position:relative;}
.item-card .veg-dot::after{content:'';position:absolute;inset:2px;background:var(--success);border-radius:50%;}
.item-card .veg-dot.non-veg{border-color:var(--danger);}
.item-card .veg-dot.non-veg::after{background:var(--danger); border-radius:2px;}
.item-card .i-name{font-weight:600; font-size:.9rem; margin:8px 0 4px; line-height:1.25; min-height:2.3em;}
.item-card .i-rate{color:var(--brand-dark); font-weight:700;}
.item-card .add-btn{width:100%; margin-top:8px;}

.cart-row{display:flex; align-items:center; gap:8px; padding:10px 6px; border-bottom:1px solid var(--border);}
.cart-row:last-child{border-bottom:none;}
.cart-row .c-name{flex:1; font-size:.87rem; font-weight:600;}
.cart-row .c-rate{font-size:.78rem; color:var(--ink-soft);}
.qty-stepper{display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.qty-stepper button{border:none; background:#f2f3f7; width:26px; height:26px; font-weight:700;}
.qty-stepper input{width:32px; text-align:center; border:none; font-weight:700;}
.existing-order-badge{background:var(--warning-bg); color:var(--warning); border-radius:8px; padding:8px 12px; font-size:.8rem; margin-bottom:12px;}

/* ---------------------------------------------------------------------
   Badges / status pills (tables, reports)
   ------------------------------------------------------------------- */
.badge-soft{padding:5px 12px; border-radius:20px; font-weight:600; font-size:.75rem;}
.badge-soft.success{background:var(--success-bg); color:var(--success);}
.badge-soft.warning{background:var(--warning-bg); color:var(--warning);}
.badge-soft.danger{background:var(--danger-bg); color:var(--danger);}
.badge-soft.info{background:#e8f0fe; color:var(--info);}

/* ---------------------------------------------------------------------
   Login screen
   ------------------------------------------------------------------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, #2c3350, #12141c 60%);
  padding:20px;
}
.login-card{
  background:var(--surface); border-radius:20px; width:100%; max-width:400px;
  padding:38px 34px; box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.login-card .logo-badge{
  width:56px;height:56px;border-radius:16px;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--brand),#ff9457);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem;
}

/* ---------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */
.btn-brand{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;}
.btn-brand:hover{background:var(--brand-dark); border-color:var(--brand-dark); color:#fff;}
.btn-outline-brand{border-color:var(--brand); color:var(--brand-dark); font-weight:600;}
.btn-outline-brand:hover{background:var(--brand); color:#fff;}

/* ---------------------------------------------------------------------
   Tables (data lists)
   ------------------------------------------------------------------- */
.table-modern thead th{
  background:#fafbfe; border-bottom:2px solid var(--border);
  font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);
  font-weight:700; padding:12px 14px;
}
.table-modern td{padding:12px 14px; vertical-align:middle; font-size:.9rem;}
.table-modern tbody tr{border-bottom:1px solid var(--border);}

/* ---------------------------------------------------------------------
   Invoice / print
   ------------------------------------------------------------------- */
.invoice-box{max-width:400px; margin:0 auto; background:#fff; padding:24px; font-family:'Inter',monospace;}
.invoice-box .r-name{font-weight:800; font-size:1.2rem; text-align:center;}
.invoice-box .r-sub{text-align:center; font-size:.78rem; color:var(--ink-soft);}
.invoice-box hr{border-top:1px dashed #999;}
.invoice-box table{width:100%; font-size:.85rem;}
.invoice-box .totals td{font-weight:700;}

@media print{
  body *{visibility:hidden;}
  .invoice-box, .invoice-box *{visibility:visible;}
  .invoice-box{position:absolute; left:0; top:0; width:100%; max-width:100%;}
  .no-print{display:none !important;}
}

/* ---------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */
@media (max-width: 991px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-content{margin-left:0;}
  .sidebar-toggle{display:inline-flex;}
  .order-layout{flex-direction:column;}
  .cart-panel{width:100%; position:static; max-height:none;}
}