/* ═══════════ RestaurantOS — نظام إدارة المطاعم ═══════════ */
:root{
  --brand:#10b981; --brand-d:#059669; --brand-l:rgba(16,185,129,.1);
  --gold:#f59e0b; --gold-d:#b45309;
  --plat:#8b5cf6; --plat-d:#5b21b6;
  --red:#ef4444; --red-d:#dc2626;
  --blue:#3b82f6;
  --bg:#f5f7fa; --card:#ffffff; --line:rgba(0,0,0,.09);
  --ink:#1e293b; --ink-2:#475569; --ink-3:#64748b; --ink-4:#94a3b8;
  --radius:14px;
  --shadow:0 2px 12px rgba(0,0,0,.05);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Cairo',sans-serif;min-height:100vh}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
button{font-family:'Cairo',sans-serif}
input,select,textarea{font-family:'Cairo',sans-serif}
a{color:var(--brand-d);text-decoration:none}

/* ── أزرار ── */
.btn{border:none;border-radius:11px;padding:10px 20px;font-weight:700;font-size:14px;cursor:pointer;transition:all .25s;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--brand-d),var(--brand));color:#fff;box-shadow:0 6px 18px rgba(16,185,129,.3)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px rgba(16,185,129,.4)}
.btn-gold{background:linear-gradient(135deg,#d97706,#fbbf24);color:#fff;box-shadow:0 6px 18px rgba(245,158,11,.3)}
.btn-plat{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;box-shadow:0 6px 18px rgba(139,92,246,.3)}
.btn-outline{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand-d);background:var(--brand-l)}
.btn-danger{background:rgba(239,68,68,.1);color:var(--red-d);border:1px solid rgba(239,68,68,.3)}
.btn-danger:hover{background:rgba(239,68,68,.18)}
.btn-sm{padding:6px 13px;font-size:12.5px;border-radius:9px}
.btn-lg{padding:14px 30px;font-size:16px}
.btn-block{width:100%}

/* ── بطاقات ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:22px}
.card-title{font-size:16px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}

/* ── نماذج ── */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:6px}
.input{width:100%;background:rgba(0,0,0,.035);border:1px solid var(--line);border-radius:11px;padding:11px 15px;font-size:14px;color:var(--ink);outline:none;transition:all .25s}
.input:focus{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 3px rgba(16,185,129,.12)}
.input::placeholder{color:var(--ink-4)}
select.input{cursor:pointer}
textarea.input{resize:vertical}

/* ── شارات ── */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 12px;font-size:11.5px;font-weight:700}
.badge-green{background:rgba(16,185,129,.12);color:#065f46;border:1px solid rgba(16,185,129,.3)}
.badge-amber{background:rgba(245,158,11,.12);color:#92400e;border:1px solid rgba(245,158,11,.3)}
.badge-red{background:rgba(239,68,68,.1);color:#b91c1c;border:1px solid rgba(239,68,68,.3)}
.badge-purple{background:rgba(139,92,246,.1);color:#5b21b6;border:1px solid rgba(139,92,246,.3)}
.badge-blue{background:rgba(59,130,246,.1);color:#1d4ed8;border:1px solid rgba(59,130,246,.3)}
.badge-gray{background:rgba(0,0,0,.05);color:var(--ink-2);border:1px solid var(--line)}

/* ── جداول ── */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:right;padding:11px 14px;color:var(--ink-3);font-size:12px;font-weight:700;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid rgba(0,0,0,.05);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:rgba(16,185,129,.04)}

/* ── تسجيل الدخول ── */
#login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(16,185,129,.14) 0%,transparent 70%),var(--bg)}
.login-box{width:100%;max-width:920px}
.user-card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:20px 14px;text-align:center;cursor:pointer;transition:all .25s}
.user-card:hover,.user-card.sel{border-color:var(--brand);box-shadow:0 8px 24px rgba(16,185,129,.18);transform:translateY(-3px)}
.user-avatar{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--brand-l)}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:18px 0}
.pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink-4);transition:all .2s}
.pin-dot.on{background:var(--brand);border-color:var(--brand)}
.pin-pad{display:grid;grid-template-columns:repeat(3,72px);gap:10px;justify-content:center}
.pin-key{height:56px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-size:20px;font-weight:800;cursor:pointer;transition:all .15s;color:var(--ink)}
.pin-key:hover{background:var(--brand-l);border-color:var(--brand)}
.pin-key:active{transform:scale(.94)}

/* ── الهيكل ── */
#app-view{display:none;min-height:100vh}
#app-view.on{display:flex}
.sidebar{width:245px;background:#0f172a;color:#cbd5e1;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;right:0;z-index:40;overflow-y:auto;transition:transform .3s}
.sidebar .logo{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 18px;color:#94a3b8;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s;border-right:3px solid transparent}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav-item.on{color:#34d399;background:rgba(16,185,129,.1);border-right-color:var(--brand)}
.nav-item .lock{margin-right:auto;font-size:11px;opacity:.8}
.nav-sec{padding:14px 18px 5px;font-size:10.5px;font-weight:800;color:#475569;letter-spacing:1px}
.main{flex:1;margin-right:245px;display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:12px 26px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30}
.screen{padding:26px;flex:1}
.screen-title{font-size:22px;font-weight:900;margin-bottom:4px}
.screen-sub{font-size:13.5px;color:var(--ink-3);margin-bottom:22px}

/* ── إحصائيات ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.kpi .kpi-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px}
.kpi .kpi-val{font-size:24px;font-weight:900}
.kpi .kpi-lbl{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ── POS ── */
.pos-layout{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cat-tab{padding:8px 18px;border-radius:24px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink-2);transition:all .2s}
.cat-tab.on{background:linear-gradient(135deg,var(--brand-d),var(--brand));color:#fff;border-color:transparent}
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.item-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;transition:all .2s;text-align:center}
.item-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,185,129,.14)}
.item-card .emoji{font-size:32px;margin-bottom:6px}
.item-card .nm{font-size:13.5px;font-weight:700;line-height:1.4}
.item-card .pr{font-size:13px;color:var(--brand-d);font-weight:800;margin-top:4px}
.item-card.out{opacity:.45;pointer-events:none}
.cart-line{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px dashed var(--line)}
.qty-btn{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-weight:800;font-size:14px;color:var(--ink-2)}
.qty-btn:hover{border-color:var(--brand);color:var(--brand-d)}
.type-seg{display:flex;background:rgba(0,0,0,.05);border-radius:12px;padding:4px;gap:4px;margin-bottom:14px}
.type-seg button{flex:1;border:none;background:transparent;padding:9px 4px;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink-3);transition:all .2s}
.type-seg button.on{background:var(--card);color:var(--brand-d);box-shadow:0 2px 8px rgba(0,0,0,.1)}

/* ── الترابيزات ── */
.tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.table-card{border-radius:16px;padding:18px 12px;text-align:center;cursor:pointer;transition:all .25s;border:2px solid}
.table-card:hover{transform:translateY(-3px)}
.table-card .tnum{font-size:22px;font-weight:900}
.table-card .tst{font-size:11.5px;font-weight:700;margin-top:4px}
.ts-empty{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.35);color:#065f46}
.ts-occupied{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.4);color:#92400e}
.ts-billing{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.35);color:#b91c1c}
.ts-clean{background:rgba(139,92,246,.07);border-color:rgba(139,92,246,.35);color:#5b21b6}

/* ── شاشة المطبخ ── */
.kds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.kds-card{border-radius:16px;border:2px solid;overflow:hidden;background:var(--card)}
.kds-head{padding:11px 14px;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px}
.kds-g{border-color:rgba(16,185,129,.5)} .kds-g .kds-head{background:rgba(16,185,129,.12);color:#065f46}
.kds-y{border-color:rgba(245,158,11,.55)} .kds-y .kds-head{background:rgba(245,158,11,.12);color:#92400e}
.kds-r{border-color:rgba(239,68,68,.55);animation:kdspulse 1.6s infinite} .kds-r .kds-head{background:rgba(239,68,68,.1);color:#b91c1c}
@keyframes kdspulse{0%,100%{box-shadow:0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 0 22px rgba(239,68,68,.35)}}
.kds-body{padding:12px 14px}
.kds-line{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--line)}

/* ── مودال ── */
.modal-back{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .2s}
.modal{background:var(--card);border-radius:18px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:popin .25s}
.modal.wide{max-width:820px}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--card);z-index:2;border-radius:18px 18px 0 0}
.modal-body{padding:22px}
.modal-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:15px;color:var(--ink-3)}
.modal-x:hover{background:rgba(239,68,68,.08);color:var(--red-d);border-color:rgba(239,68,68,.3)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes popin{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}

/* ── إشعارات ── */
#toast-root{position:fixed;bottom:22px;left:22px;z-index:120;display:flex;flex-direction:column;gap:9px}
.toast{background:#0f172a;color:#fff;border-radius:12px;padding:13px 20px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);display:flex;gap:9px;align-items:center;animation:toastin .3s;max-width:340px}
.toast.ok{border-right:4px solid var(--brand)}
.toast.err{border-right:4px solid var(--red)}
.toast.warn{border-right:4px solid var(--gold)}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── رسوم بيانية ── */
.bars{display:flex;align-items:flex-end;gap:6px;height:170px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bar{width:100%;max-width:38px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--brand),var(--brand-d));transition:height .6s;position:relative}
.bar:hover{opacity:.8}
.bar-lbl{font-size:9.5px;color:var(--ink-4);white-space:nowrap;overflow:hidden;max-width:100%}
.hbar{height:8px;border-radius:4px;background:rgba(0,0,0,.07);overflow:hidden;flex:1}
.hbar>div{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand-d),var(--brand))}

/* ── الباقات ── */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.plan-card{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:26px;position:relative;transition:all .3s}
.plan-card.cur{box-shadow:0 12px 40px rgba(16,185,129,.15)}
.plan-card.p-silver.cur{border-color:#94a3b8}
.plan-card.p-gold.cur{border-color:var(--gold)}
.plan-card.p-platinum.cur{border-color:var(--plat)}
.plan-name{font-size:24px;font-weight:900}
.pn-silver{background:linear-gradient(135deg,#475569,#94a3b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pn-gold{background:linear-gradient(135deg,#b45309,#f59e0b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pn-platinum{background:linear-gradient(135deg,#5b21b6,#8b5cf6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.plan-price{font-size:32px;font-weight:900;margin:8px 0 2px}
.plan-feat{display:flex;gap:9px;font-size:13px;color:var(--ink-2);padding:5px 0;align-items:flex-start;line-height:1.6}
.plan-feat .d{width:17px;height:17px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;margin-top:3px}

/* ── فاتورة ── */
.invoice{font-size:13px;max-width:340px;margin:0 auto;background:#fff;color:#111;padding:18px}
.invoice h2{text-align:center;font-size:18px}
.invoice .inv-line{display:flex;justify-content:space-between;padding:4px 0}
.invoice hr{border:none;border-top:1px dashed #999;margin:9px 0}
@media print{
  body *{visibility:hidden}
  #print-area,#print-area *{visibility:visible}
  #print-area{position:absolute;top:0;right:0;left:0}
  .no-print{display:none!important}
}

/* ── متفرقات ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.flex{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wrap{flex-wrap:wrap}
.mt{margin-top:16px}.mb{margin-bottom:16px}
.muted{color:var(--ink-3);font-size:13px}
.small{font-size:12px}
.b{font-weight:800}
.empty-state{text-align:center;padding:44px 20px;color:var(--ink-4)}
.empty-state .es-icon{font-size:44px;margin-bottom:12px}
.lock-note{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(139,92,246,.06));border:1px solid rgba(245,158,11,.3);border-radius:14px;padding:16px 20px;display:flex;gap:12px;align-items:center;margin-bottom:18px}
.tag-ai{display:inline-block;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;margin:3px}
.menu-burger{display:none;border:none;background:transparent;font-size:22px;cursor:pointer;color:var(--ink)}

@media(max-width:960px){
  .pos-layout{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:none;box-shadow:-10px 0 40px rgba(0,0,0,.3)}
  .main{margin-right:0}
  .menu-burger{display:block}
  .screen{padding:16px}
}