@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800&family=Tajawal:wght@400;500;700&display=swap');

:root{
  --espresso:#2E1F17;
  --espresso-2:#3C2A21;
  --cream:#FBF6EE;
  --amber:#B9791F;
  --amber-light:#E3A94C;
  --teal:#1F6F62;
  --red:#B23A34;
  --ink:#221510;
  --line:#E7DCC9;
  --radius:14px;
  --shadow: 0 10px 30px rgba(46,31,23,.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Tajawal', sans-serif;
  direction:rtl;
  min-height:100vh;
}
h1,h2,h3,h4,.brand{font-family:'Cairo', sans-serif; font-weight:800;}

a{color:inherit; text-decoration:none;}

.topbar{
  background:var(--espresso);
  color:var(--cream);
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:var(--shadow);
}
.topbar .brand{font-size:20px; color:var(--amber-light);}
.topbar .who{font-size:14px; opacity:.85;}
.topbar nav a{margin-inline-start:16px; font-size:14px; color:var(--cream); opacity:.9;}
.topbar nav a:hover{color:var(--amber-light);}

.container{max-width:1180px; margin:0 auto; padding:24px;}

.grid-menu{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px;}
.tile{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 16px; text-align:center; box-shadow:var(--shadow);
  transition:transform .15s ease, border-color .15s ease;
}
.tile:hover{transform:translateY(-3px); border-color:var(--amber);}
.tile .icon{font-size:32px; display:block; margin-bottom:10px;}
.tile .label{font-family:'Cairo'; font-weight:700; color:var(--espresso);}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-bottom:18px;}

table{width:100%; border-collapse:collapse; font-size:14px;}
table th, table td{padding:10px 8px; border-bottom:1px solid var(--line); text-align:right;}
table th{color:var(--espresso); font-family:'Cairo'; font-weight:700; background:#FAF2E4;}
table tr:hover td{background:#FCF8EF;}

.btn{
  display:inline-block; padding:10px 18px; border-radius:10px; border:none;
  background:var(--amber); color:#fff; font-family:'Tajawal'; font-weight:700;
  cursor:pointer; font-size:14px;
}
.btn:hover{background:#A56A18;}
.btn.secondary{background:var(--espresso-2);}
.btn.danger{background:var(--red);}
.btn.success{background:var(--teal);}
.btn.ghost{background:transparent; color:var(--espresso); border:1px solid var(--line);}

input, select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font-family:'Tajawal'; font-size:14px; background:#fff; color:var(--ink);
}
label{display:block; margin-bottom:6px; font-size:13px; color:#6b5643; font-weight:600;}
.field{margin-bottom:14px;}
.row{display:flex; gap:14px; flex-wrap:wrap;}
.row > *{flex:1; min-width:160px;}

.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700;}
.badge.ok{background:#E4F3EF; color:var(--teal);}
.badge.warn{background:#FBEAEA; color:var(--red);}

.alert{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px;}
.alert.success{background:#E4F3EF; color:var(--teal); border:1px solid #bfe4dc;}
.alert.error{background:#FBEAEA; color:var(--red); border:1px solid #f0c9c6;}

/* ===== شاشة الدخول (الكاشير الرقمي) ===== */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 0%, #4a3225, var(--espresso) 60%);
}
.terminal{
  width:340px; background:var(--espresso-2); border-radius:26px; padding:26px 22px;
  box-shadow:0 25px 60px rgba(0,0,0,.45); border:1px solid #55402f;
}
.terminal .logo{text-align:center; color:var(--amber-light); font-size:22px; margin-bottom:16px;}
.display{
  background:#1A110C; border-radius:12px; padding:18px; margin-bottom:18px;
  text-align:center; min-height:34px; letter-spacing:10px; font-size:28px;
  color:var(--amber-light); font-family:'Cairo'; box-shadow:inset 0 0 10px rgba(0,0,0,.6);
}
.dots{color:var(--amber-light);}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.key{
  background:#4a3527; color:var(--cream); border:none; border-radius:14px;
  padding:18px 0; font-size:20px; font-family:'Cairo'; font-weight:700; cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.key:active{transform:translateY(2px); box-shadow:none;}
.key.clear{background:var(--red);}
.key.enter{background:var(--teal);}
.login-error{color:#ff9c95; text-align:center; margin-bottom:12px; font-size:13px;}

/* ===== شاشة نقطة البيع (POS) ===== */
.pos-grid{display:grid; grid-template-columns: 2.2fr 1fr; gap:18px;}
@media (max-width: 900px){ .pos-grid{grid-template-columns:1fr;} }
.items-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px;}
.item-btn{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 8px;
  text-align:center; cursor:pointer; box-shadow:var(--shadow);
}
.item-btn:hover{border-color:var(--amber);}
.item-btn .name{font-family:'Cairo'; font-weight:700; font-size:14px; color:var(--espresso);}
.item-btn .price{color:var(--amber); font-size:13px; margin-top:4px;}
.cart{background:#fff; border-radius:14px; padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; height:100%;}
.cart-line{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line); font-size:14px;}
.cart-total{font-family:'Cairo'; font-size:22px; color:var(--espresso); text-align:center; margin:14px 0;}

.footer-note{text-align:center; color:#9c8a72; font-size:12px; padding:20px;}