:root{
  --navy:#0B2545; --navy-2:#13315C; --ink:#0F172A; --muted:#5B6B82; --line:#E2E8F0;
  --green:#16A34A; --green-soft:#DCFCE7; --amber:#F59E0B; --red:#DC2626;
  --bg:#F7F9FC; --card:#FFFFFF; --radius:16px; --shadow:0 6px 24px rgba(11,37,69,.08);
  --font:"Segoe UI",Tahoma,"Noto Naskh Arabic",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font)}
body{min-height:100vh;direction:rtl}
a{color:var(--navy-2)}
.wrap{max-width:520px;margin:0 auto;padding:20px 16px 40px}
.brand{display:flex;align-items:center;gap:10px;justify-content:center;margin:18px 0 10px}
.logo{width:38px;height:38px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;letter-spacing:.5px}
.brand h1{font-size:20px;margin:0;color:var(--navy)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
.order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.code{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:1px}
.table{font-size:13px;color:var(--muted)}
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;background:var(--navy-2);color:#fff}
.status-READY{background:var(--green)}
.status-PREPARING,.status-PARTIALLY_READY{background:var(--amber);color:#3b2b00}
.status-CANCELLED{background:var(--red)}
.status-COMPLETED,.status-HANDED_OVER{background:#334155}
.progress{height:12px;border-radius:999px;background:#E8EEF6;overflow:hidden;margin:16px 0 8px}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--navy-2),var(--green));transition:width .5s ease}
.steps{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:4px}
.items{list-style:none;margin:0;padding:0}
.items li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.items li:last-child{border-bottom:0}
.item-name{font-weight:600}
.item-status{font-size:12px;color:var(--muted)}
.meta{font-size:12px;color:var(--muted);margin-top:8px}
.conn{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);justify-content:center;margin-top:8px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green)}
.dot.off{background:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 18px;font-size:16px;font-weight:700;cursor:pointer;background:var(--navy);color:#fff;width:100%}
.btn.green{background:var(--green)} .btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.ready-banner{display:none;background:var(--green-soft);border:1px solid #86EFAC;color:#14532D;border-radius:var(--radius);padding:16px;text-align:center;font-weight:800;font-size:18px;margin-bottom:14px}
.ready-banner.show{display:block;animation:pop .4s ease}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:scale(1);opacity:1}}
.row{display:flex;gap:10px} .row > *{flex:1}
input,select{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);font:inherit;background:#fff}
label{font-size:13px;color:var(--muted);display:block;margin:8px 0 4px}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;min-height:200px}
.col h3{margin:0 0 10px;font-size:14px;color:var(--navy)}
.ticket{border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:10px;background:#FBFDFF}
.ticket .code{font-size:18px}
.ticket small{color:var(--muted)}
.ticket .actions{display:flex;gap:6px;margin-top:8px}
.ticket button{flex:1;border:0;border-radius:10px;padding:9px;font-weight:700;cursor:pointer;background:var(--navy);color:#fff;font-size:13px}
.ticket button.green{background:var(--green)}
@media (max-width:640px){ .board{grid-template-columns:1fr} }

/* R06: عناصر hidden تبقى مخفية مهما كانت قواعد display */
[hidden]{display:none !important}

/* R3: احتواء التسميات الطويلة غير المنقسمة على شاشة 390px — التفاف بلا قص أو إخفاء */
body{overflow-wrap:break-word}
.row > *,.order-head > *,.items li > *,.col,.board > *{min-width:0}
.board{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){ .board{grid-template-columns:minmax(0,1fr)} }
.code,.item-name,.brand h1,.table{overflow-wrap:anywhere}
/* عنصر li في تذكرة المطبخ نصّ مباشر (عنصر مرن مجهول) فيُحتوى بالالتفاف الموروث */
.ticket small,.ticket .items li{overflow-wrap:anywhere}
/* لوحة المطعم /admin: تبقى أنماطها الخاصة؛ هنا الاحتواء فقط وإلغاء تسرب القواعد العامة */
#dash .row > *{flex:0 1 auto}
#dash .row > :last-child{min-width:min-content}
#dash .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){ #dash .grid{grid-template-columns:minmax(0,1fr)} }
#dash .grid > *{min-width:0}
#dash .row b,#tname,#tmeta,#qrTitle,#dash .row .muted{overflow-wrap:anywhere}
#loginCard,#signupCard,#dash .card,#ordersCard,#ordersCard ~ .card{box-shadow:none}
:is(#loginCard,#signupCard,#dash) :is(input,select){font-family:revert;font-weight:revert;line-height:revert;font-style:revert}
/* صفحة الضيف /table */
#tbl,.item .n,.ord > :first-child{min-width:0;overflow-wrap:anywhere}