:root {
    --w-primary: #C0392B;
    --w-primary-dark: #9E2F23;
    --w-soft: #FDF1EF;
    --w-ink: #1F2933;
    --w-muted: #6B7280;
    --w-line: #E5E7EB;
    --w-bg: #F7F7F8;
    --w-pending: #B45309;
    --w-pending-bg: #FEF3C7;
    --w-confirmed: #1D4ED8;
    --w-confirmed-bg: #DBEAFE;
    --w-ready: #15803D;
    --w-ready-bg: #DCFCE7;
}

/* ---------- ألوان لوحة الكاشير: يختارها كل مستخدم ويُحفظ اختياره ---------- */
:root { --nav-bg: #fff; --nav-ink: #1F2933; --nav-line: #E5E7EB; }
/* نمط المنصة الافتراضي من ألوان الشعار: كحلي للشريط وبرتقالي للأزرار */
[data-pos-theme="wajba"]  { --w-primary: #E8730C; --w-primary-dark: #C25E08; --w-soft: #FDF0E3; --w-bg: #F7F6F3; --nav-bg: #1C2541; --nav-ink: #FFFFFF; --nav-line: #1C2541; }
[data-pos-theme="gold"]   { --w-primary: #B8892B; --w-primary-dark: #8F6A1F; --w-soft: #FAF3E3; --w-bg: #FBF9F4; }
[data-pos-theme="black"]  { --w-primary: #1A1A1A; --w-primary-dark: #000; --w-soft: #EDEDED; --w-bg: #F4F4F4; --nav-bg: #111; --nav-ink: #F5F5F5; --nav-line: #111; }
[data-pos-theme="olive"]  { --w-primary: #5F6F2E; --w-primary-dark: #4A5723; --w-soft: #EFF1E3; --w-bg: #F7F7F0; }
[data-pos-theme="blue"]   { --w-primary: #2563A8; --w-primary-dark: #1D4E85; --w-soft: #EEF4FB; --w-bg: #F5F8FC; }
[data-pos-theme="navy"]   { --w-primary: #14264F; --w-primary-dark: #0C1834; --w-soft: #F3EEDF; --w-bg: #F8F6F0; --nav-bg: #14264F; --nav-ink: #FAF7EF; --nav-line: #14264F; }
[data-pos-theme="green"]  { --w-primary: #2E7D52; --w-primary-dark: #236240; --w-soft: #EEF7F1; --w-bg: #F5F9F6; }
[data-pos-theme="purple"] { --w-primary: #6D3FA0; --w-primary-dark: #55307E; --w-soft: #F3EDFA; --w-bg: #F8F5FB; }
[data-pos-theme="teal"]   { --w-primary: #0F8B8D; --w-primary-dark: #0B6D6F; --w-soft: #E7F6F6; --w-bg: #F4FAFA; }
[data-pos-theme="coffee"] { --w-primary: #7B4B2A; --w-primary-dark: #5E391F; --w-soft: #F3E8DD; --w-bg: #FAF6F2; --nav-bg: #3B2516; --nav-ink: #FBF6F1; --nav-line: #3B2516; }

html { font-size: 15px; }
body {
    font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    color: var(--w-ink);
    background: var(--w-bg);
}

/* Bootstrap 5.1 لا يستخدم متغيرات للأزرار، فنغيّر الألوان مباشرة */
.btn-primary, .btn-primary:disabled { background-color: var(--w-primary); border-color: var(--w-primary); color: #fff; }
.form-check-input:focus, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem var(--w-soft); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--w-primary-dark); border-color: var(--w-primary-dark); color: #fff; }
.btn-outline-primary { color: var(--w-primary); border-color: var(--w-primary); }
.btn-outline-primary:hover, .btn-outline-primary:active { background-color: var(--w-primary); border-color: var(--w-primary); color: #fff; }
.form-switch .form-check-input:checked { background-color: var(--w-primary); border-color: var(--w-primary); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--w-primary); }
a { color: var(--w-primary); }
.form-control:focus, .form-select:focus { border-color: var(--w-primary); box-shadow: 0 0 0 .2rem rgba(192, 57, 43, .15); }
.form-check-input:checked { background-color: var(--w-primary); border-color: var(--w-primary); }

/* ---------- لوحات الإدارة ---------- */
.dash-nav { background: var(--nav-bg); border-bottom: 1px solid var(--nav-line); }
.navbar-brand, .navbar-brand:hover { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--nav-ink); }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--w-primary); color: #fff; font-weight: 800; }
.dash-nav .brand-mark { box-shadow: 0 0 0 2px var(--nav-bg), 0 0 0 3px rgba(255,255,255,.35); }
.brand-logo { width: 38px; height: 38px; border-radius: 10px; background: #fff; object-fit: contain; }
.logo-full { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
/* الشريط الداكن بلون الزر نفسه: الشعار ذهبي حتى لا يختفي */
[data-pos-theme="black"] .dash-nav .brand-mark, [data-pos-theme="navy"] .dash-nav .brand-mark { background: #C9A24B; color: #111; }
[data-pos-theme="coffee"] .dash-nav .brand-mark { background: #C08552; }
.brand-sub { font-weight: 500; color: var(--nav-ink); opacity: .65; font-size: .85rem; border-inline-start: 1px solid currentColor; padding-inline-start: .5rem; }
.dash-nav .nav-link { color: var(--nav-ink); opacity: .72; }
.dash-nav .nav-link:hover { opacity: 1; color: var(--nav-ink); }
.dash-nav .nav-link.active { opacity: 1; font-weight: 700; color: var(--nav-ink); box-shadow: inset 0 -3px 0 var(--w-primary); }
[data-pos-theme="black"] .dash-nav .nav-link.active, [data-pos-theme="navy"] .dash-nav .nav-link.active { box-shadow: inset 0 -3px 0 #C9A24B; }
[data-pos-theme="black"] .navbar-toggler-icon, [data-pos-theme="navy"] .navbar-toggler-icon, [data-pos-theme="wajba"] .navbar-toggler-icon, [data-pos-theme="coffee"] .navbar-toggler-icon { filter: invert(1); }
/* Bootstrap 5.1 لا يرسم أيقونة القائمة إلا مع navbar-light/dark، فنرسمها هنا؛ الأشرطة الداكنة تعكسها للأبيض */
.dash-nav .navbar-toggler { border-color: rgba(127,127,127,.45); }
.dash-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2831, 41, 51, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.dash-nav .user-name { color: var(--nav-ink); opacity: .7; }
.dash-nav .btn-nav { color: var(--nav-ink); border-color: currentColor; opacity: .85; }
.dash-nav .btn-nav:hover { opacity: 1; color: var(--nav-ink); background: rgba(127,127,127,.15); }

/* منتقي ألوان اللوحة */
.pos-themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; padding: .5rem; min-width: 260px; }
.pos-themes button { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--w-line); background: #fff; border-radius: 10px; padding: .4rem .55rem; font-size: .85rem; text-align: start; }
.pos-themes button.current { border-color: var(--w-primary); box-shadow: 0 0 0 2px var(--w-soft); font-weight: 700; }
.pos-themes .sw { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.12); }
.dash-main { padding: 1.25rem 1rem 3rem; max-width: 1400px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.panel { background: #fff; border: 1px solid var(--w-line); border-radius: 14px; padding: 1rem; margin-bottom: 1rem; }
.panel h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; }
.table { --bs-table-bg: transparent; }
.table th { color: var(--w-muted); font-weight: 500; font-size: .85rem; }
.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--w-soft); }
.thumb-ph { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--w-soft); color: var(--w-primary); font-weight: 700; }
.badge-soft { background: var(--w-soft); color: var(--w-primary); font-weight: 500; }
.stat { background: #fff; border: 1px solid var(--w-line); border-radius: 14px; padding: 1rem; }
.stat .v { font-size: 1.6rem; font-weight: 800; }
.stat .l { color: var(--w-muted); font-size: .85rem; }

/* ---------- تسجيل الدخول والصفحة الرئيسية ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--w-soft); }
.auth-card { width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 2rem 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.auth-card .brand-mark { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 16px; }
[data-pos-theme="wajba"] .auth-wrap { background: linear-gradient(180deg, #1C2541 0 34%, var(--w-soft) 34%); }
[data-pos-theme="wajba"] .auth-card { border-top: 5px solid var(--w-primary); }

/* ---------- لوحة الكاشير ---------- */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 991px) { .board { grid-template-columns: 1fr; } }
.lane { background: #fff; border: 1px solid var(--w-line); border-radius: 14px; padding: .75rem; min-height: 200px; }
.lane-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; padding: .25rem .25rem .75rem; }
.lane-count { border-radius: 999px; padding: 0 .6rem; font-size: .85rem; }
.lane.pending .lane-count { background: var(--w-pending-bg); color: var(--w-pending); }
.lane.confirmed .lane-count { background: var(--w-confirmed-bg); color: var(--w-confirmed); }
.lane.ready .lane-count { background: var(--w-ready-bg); color: var(--w-ready); }
.ticket { border: 1px solid var(--w-line); border-radius: 12px; padding: .75rem; margin-bottom: .75rem; background: #fff; }
.lane.pending .ticket { border-inline-start: 4px solid var(--w-pending); }
.lane.confirmed .ticket { border-inline-start: 4px solid var(--w-confirmed); }
.lane.ready .ticket { border-inline-start: 4px solid var(--w-ready); }
.ticket.is-new { animation: flash 1.2s ease 2; }
@keyframes flash { 50% { background: var(--w-pending-bg); } }
.ticket-num { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.ticket-meta { color: var(--w-muted); font-size: .85rem; }
.ticket ul { list-style: none; padding: 0; margin: .5rem 0; font-size: .95rem; }
.ticket li small { color: var(--w-muted); display: block; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.ticket-total { font-weight: 700; }
.empty-lane { color: var(--w-muted); text-align: center; padding: 2rem .5rem; font-size: .9rem; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--w-muted); margin-inline-end: .35rem; }
.live-dot.on { background: var(--w-ready); box-shadow: 0 0 0 3px var(--w-ready-bg); }

/* ---------- محرر الصنف ---------- */
.rows-table td { vertical-align: middle; }
.lib-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; margin-top: .5rem; }
.lib-results button { border: 2px solid transparent; border-radius: 10px; padding: 0; background: none; overflow: hidden; text-align: center; font-size: .75rem; }
.lib-results button.selected { border-color: var(--w-primary); }
.lib-results img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.preview-img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; background: var(--w-soft); }
.theme-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin-inline-end: .35rem; border: 1px solid rgba(0,0,0,.1); }

/* ---------- صفحة المظهر ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.theme-card, .layout-card { position: relative; display: flex; flex-direction: column; gap: .4rem; border: 2px solid var(--w-line); border-radius: 12px; padding: .5rem; cursor: pointer; background: #fff; line-height: 1.35; }
.theme-card input, .layout-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card:has(input:checked), .layout-card:has(input:checked) { border-color: var(--w-primary); box-shadow: 0 0 0 3px var(--w-soft); }
.theme-card:has(input:focus-visible), .layout-card:has(input:focus-visible) { outline: 2px solid var(--w-primary); }
.theme-chip { display: grid; place-items: center; height: 44px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); }
.theme-chip span { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* رسوم مصغّرة لكل طريقة ترتيب */
.mini { display: grid; gap: 4px; height: 76px; padding: 6px; border-radius: 8px; background: var(--w-bg); border: 1px solid var(--w-line); overflow: hidden; --img: var(--w-primary); --txt: #CBD0D6; }
.mini i { display: block; border-radius: 3px; background: #fff; }
.mini-cards { grid-template-columns: 1fr 1fr; }
.mini-cards i { background: linear-gradient(to bottom, var(--img) 0 58%, #fff 58% 68%, var(--txt) 68% 78%, #fff 78%); }
.mini-list, .mini-list-end { grid-template-rows: repeat(4, 1fr); }
.mini-list i { background: linear-gradient(to left, var(--img) 0 22%, #fff 22% 28%, var(--txt) 28% 75%, #fff 75%); }
.mini-list-end i { background: linear-gradient(to right, var(--img) 0 22%, #fff 22% 28%, var(--txt) 28% 75%, #fff 75%); }
.mini-large { grid-template-rows: 1fr 1fr; }
.mini-large i { background: linear-gradient(to bottom, var(--img) 0 62%, #3F3F46 62%); }
.mini-large i:nth-child(n+3), .mini-stacked i:nth-child(n+3) { display: none; }
.mini-stacked { grid-template-rows: 1fr 1fr; }
.mini-stacked i { background: linear-gradient(to bottom, var(--img) 0 66%, #fff 66% 76%, var(--txt) 76% 88%, #fff 88%); }
.mini-magazine { grid-template-rows: repeat(3, 1fr); }
.mini-magazine i:nth-child(4) { display: none; }
.mini-magazine i:nth-child(odd) { background: linear-gradient(to left, var(--img) 0 40%, #fff 40% 48%, var(--txt) 48% 85%, #fff 85%); }
.mini-magazine i:nth-child(even) { background: linear-gradient(to right, var(--img) 0 40%, #fff 40% 48%, var(--txt) 48% 85%, #fff 85%); }
.mini-grid3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.mini-grid3::before, .mini-grid3::after { content: ""; border-radius: 3px; background: linear-gradient(to bottom, var(--img) 0 70%, #fff 70% 78%, var(--txt) 78% 88%, #fff 88%); }
.mini-grid3 i { background: linear-gradient(to bottom, var(--img) 0 70%, #fff 70% 78%, var(--txt) 78% 88%, #fff 88%); }
.mini-compact { grid-template-rows: repeat(4, 1fr); gap: 0; }
.mini-compact i { background: linear-gradient(to left, transparent 0 4%, #6B7280 4% 40%, transparent 40% 44%, transparent 44% 78%, var(--img) 78% 96%, transparent 96%) center / 100% 5px no-repeat, #fff; border-radius: 0; border-bottom: 1px dashed var(--txt); }

/* ---------- دليل النظام ---------- */
.guide { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 991px) {
    .guide { grid-template-columns: 1fr; }
    .guide-toc { position: static !important; max-height: none !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guide-toc a.sub { display: none; }
}
.guide-toc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; background: #fff; border: 1px solid var(--w-line); border-radius: 14px; padding: .75rem; }
.guide-toc a { display: block; padding: .3rem .6rem; border-radius: 8px; color: var(--w-ink); text-decoration: none; font-size: .92rem; }
.guide-toc a:hover { background: var(--w-soft); }
.guide-toc a.sub { padding-inline-start: 1.5rem; font-size: .85rem; color: var(--w-muted); }
.guide section { scroll-margin-top: 1rem; }
.guide h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.guide h3 { font-size: 1.08rem; font-weight: 700; margin: 1.25rem 0 .5rem; scroll-margin-top: 1rem; }
.guide .lead-line { color: var(--w-muted); margin-bottom: 1rem; }
.guide p, .guide li { line-height: 1.85; }
.sec-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--w-primary); color: #fff; font-size: .9rem; flex: none; }
.why { border-inline-start: 4px solid var(--w-primary); background: var(--w-soft); border-radius: 10px; padding: .7rem 1rem; margin: .75rem 0; }
.why b:first-child { display: block; margin-bottom: .15rem; }
.note { border-inline-start: 4px solid #2563A8; background: #EEF4FB; border-radius: 10px; padding: .7rem 1rem; margin: .75rem 0; }
.warn { border-inline-start: 4px solid #B45309; background: #FEF3C7; border-radius: 10px; padding: .7rem 1rem; margin: .75rem 0; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.feature { border: 1px solid var(--w-line); border-radius: 12px; padding: .8rem .9rem; background: #fff; }
.feature b { display: block; margin-bottom: .2rem; }
.feature span { color: var(--w-muted); font-size: .9rem; line-height: 1.7; }
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin: 1rem 0; }
.flow-step { flex: 1 1 150px; border: 2px solid var(--w-line); border-radius: 12px; padding: .7rem .8rem; background: #fff; position: relative; }
.flow-step small { display: block; color: var(--w-muted); line-height: 1.6; margin-top: .2rem; }
.flow-step .tag { display: inline-block; font-size: .75rem; border-radius: 999px; padding: 0 .55rem; margin-bottom: .3rem; }
.flow-arrow { display: grid; place-items: center; color: var(--w-muted); font-size: 1.3rem; }
@media (max-width: 767px) { .flow { flex-direction: column; } .flow-arrow { transform: rotate(-90deg); } }
.kbd-url { font-family: Consolas, monospace; direction: ltr; unicode-bidi: embed; background: var(--w-bg); border: 1px solid var(--w-line); border-radius: 6px; padding: 0 .35rem; font-size: .88rem; }
.swatch-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.swatch-row span { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--w-line); border-radius: 999px; padding: .15rem .6rem .15rem .25rem; font-size: .85rem; background: #fff; }
.swatch-row i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
@media print {
    .dash-nav, .guide-toc, .no-print { display: none !important; }
    .guide { display: block; }
    .panel { break-inside: avoid; border: 0; padding: 0; }
    body { background: #fff; }
}

.phone-wrap { position: sticky; top: 1rem; }
.phone { width: 100%; max-width: 340px; height: min(720px, calc(100vh - 6rem)); margin: 0 auto; border: 10px solid #1F2933; border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.15); }
.phone iframe { width: 100%; height: 100%; border: 0; display: block; }
.save-bar { position: sticky; bottom: 0; padding: .75rem 0; background: linear-gradient(transparent, var(--w-bg) 30%); z-index: 5; }
.save-bar { display: flex; gap: .5rem; justify-content: flex-start; }
.preview-open, .preview-close { display: none; }
@media (max-width: 1199px) {
    /* المعاينة مخفية أسفل الصفحة، وتُفتح بملء الشاشة من زر "معاينة المنيو" */
    .preview-open { display: inline-block; }
    .phone-wrap { display: none; }
    .phone-wrap.open { display: flex; flex-direction: column; align-items: center; position: fixed; inset: 0; z-index: 1060; background: rgba(15, 20, 30, .75); padding: .75rem; }
    .phone-wrap.open .preview-close { display: block; margin-bottom: .5rem; }
    .phone-wrap.open .preview-hint { color: #fff !important; }
    .phone-wrap.open .phone { flex: 1; height: auto; max-height: 760px; width: 100%; max-width: 400px; }
}
@media (max-width: 575px) {
    .phone-wrap.open { padding: .5rem; }
    .phone-wrap.open .phone { border-width: 0; border-radius: 14px; max-width: none; }
    .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}