/**
 * الملف: assets/style.css
 * الوظيفة: تنسيق النظام بهوية المغسلة — ذهبي برتقالي مع الأسود، الجوال أولاً، RTL.
 */
:root{
  --cw-black:#0E0E0E;      /* الخلفية الأساسية */
  --cw-panel:#171717;      /* البطاقات */
  --cw-panel2:#1F1F1F;     /* الحقول والجداول */
  --cw-line:#2C2A26;       /* الحدود */
  --cw-gold:#E0A526;       /* الذهبي: العناوين والتمييز */
  --cw-orange:#F28C1E;     /* البرتقالي: الأزرار والروابط */
  --cw-deep:#B9650B;       /* ظل الأزرار ثلاثية الأبعاد */
  --cw-text:#F4EFE6;       /* النص */
  --cw-muted:#A39B8E;      /* نص ثانوي */
  --cw-ok:#3FB37F;
  --cw-red:#E5484D;
  --cw-blue:#4A9EE8;
  --cw-grad:linear-gradient(135deg,#F5C451 0%,#E0A526 45%,#F28C1E 100%);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cw-black);color:var(--cw-text);font-family:Cairo,Tahoma,sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden}
a{color:var(--cw-orange);text-decoration:none}
h1,h2,h3{font-family:Changa,Cairo,sans-serif;color:var(--cw-gold);margin:.2em 0 .5em;line-height:1.3}
h1{font-size:1.5rem}h2{font-size:1.2rem}h3{font-size:1.05rem}
hr{border:0;border-top:1px solid var(--cw-line);margin:10px 0}
.muted{color:var(--cw-muted)}
.small{font-size:.85rem}

/* رمز الريال العماني */
.omr{display:inline-block;width:1.9em;height:1em;vertical-align:-0.12em;background:currentColor;
  -webkit-mask:url(RO.svg) no-repeat center/contain;mask:url(RO.svg) no-repeat center/contain}
.money{white-space:nowrap}

/* الشريط العلوي والقائمة */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:#000;border-bottom:3px solid transparent;border-image:var(--cw-grad) 1}
.brand{display:flex;align-items:center;gap:10px;color:var(--cw-text);font-family:Changa;font-weight:700;font-size:1.1rem}
.brand span{background:var(--cw-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.meter{height:10px;background:#000;border-radius:6px;overflow:hidden;border:1px solid var(--cw-line);margin-top:6px}
.meter i{display:block;height:100%;background:var(--cw-grad)}
.meter.full i{background:var(--cw-red)}
.plan-card{position:relative}
.plan-card.current{border-color:var(--cw-gold);box-shadow:0 0 0 1px var(--cw-gold)}
.plan-card .price{font-family:Changa;font-size:2rem;font-weight:800;color:var(--cw-text)}
.plan-card ul{padding-inline-start:18px;margin:8px 0}
.logo{width:38px;height:38px;object-fit:contain;border-radius:10px;background:#fff}
.logo-fallback{display:grid;place-items:center;background:var(--cw-grad);font-size:20px}
.branch-sw{margin-inline-start:auto}
.branch-sw select{margin:0;padding:6px 10px;font-size:14px;background:#111;border-color:var(--cw-gold);color:var(--cw-gold);max-width:170px}
.branch-tag{margin-inline-start:auto;color:var(--cw-gold);font-size:.85rem;white-space:nowrap}
.branch-sw+.who,.branch-tag+.who{margin-inline-start:12px}
.who{margin-inline-start:auto;color:var(--cw-muted);font-size:.85rem}
.menu-btn{display:none;background:none;border:0;color:var(--cw-gold);font-size:26px;cursor:pointer}
.side{position:fixed;top:61px;right:0;bottom:0;width:220px;background:#0A0A0A;border-left:1px solid var(--cw-line);
  padding:12px 10px;overflow-y:auto;z-index:25}
.side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--cw-text);margin-bottom:2px}
.side a:hover{background:var(--cw-panel)}
.side a.on{background:var(--cw-grad);color:#111;font-weight:700}
.side .ic{width:22px;text-align:center}
.scrim{display:none}
.main{margin-right:220px;padding:18px;max-width:1300px}
body.bare .main{margin:0 auto;max-width:460px;padding-top:40px}
.foot{margin-top:30px;padding:14px 0;border-top:1px solid var(--cw-line);color:var(--cw-muted);font-size:.8rem;text-align:center}
.foot a{color:var(--cw-muted)}

@media (max-width:900px){
  .menu-btn{display:block}
  .who{display:none}
  .side{transform:translateX(100%);transition:transform .2s;width:250px}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:#0008;z-index:20}
  .main{margin-right:0;padding:14px}
}

/* البطاقات والشبكات */
.card{background:var(--cw-panel);border:1px solid var(--cw-line);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--cw-panel);border:1px solid var(--cw-line);border-radius:var(--radius);padding:14px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--cw-grad)}
.stat .n{font-family:Changa;font-size:1.6rem;font-weight:800;color:var(--cw-text)}
.stat .l{color:var(--cw-muted);font-size:.85rem}
.head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}

/* الأزرار ثلاثية الأبعاد */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;cursor:pointer;font:inherit;font-weight:700;
  padding:10px 18px;border-radius:12px;color:#141414;background:var(--cw-grad);
  box-shadow:0 4px 0 var(--cw-deep),0 6px 12px #0006;transform:translateY(0);transition:transform .06s,box-shadow .06s;text-decoration:none}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--cw-deep),0 2px 6px #0006}
.btn.ghost{background:var(--cw-panel2);color:var(--cw-text);box-shadow:0 4px 0 #000,0 6px 12px #0006;border:1px solid var(--cw-line)}
.btn.red{background:var(--cw-red);color:#fff;box-shadow:0 4px 0 #8f1f22}
.btn.green{background:var(--cw-ok);color:#06190f;box-shadow:0 4px 0 #1d6b48}
.btn.blue{background:var(--cw-blue);color:#04131f;box-shadow:0 4px 0 #23608f}
.btn.sm{padding:6px 12px;font-size:.85rem;border-radius:10px}
.btn.block{width:100%}
.btns{display:flex;gap:8px;flex-wrap:wrap}

/* النماذج */
label{display:block;font-size:.88rem;color:var(--cw-muted);margin-bottom:10px}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:10px 12px;background:var(--cw-panel2);color:var(--cw-text);
  border:1px solid var(--cw-line);border-radius:10px;font:inherit;font-size:16px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cw-orange);border-color:transparent}
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;margin:0 0 0 6px;accent-color:var(--cw-orange)}
.check{display:flex;align-items:center;color:var(--cw-text)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filters label{flex:1 1 140px;margin:0}
.phone-in{display:flex;direction:ltr}
.phone-in span{padding:10px;background:#000;border:1px solid var(--cw-line);border-radius:10px 0 0 10px;margin-top:4px;color:var(--cw-gold)}
.phone-in input{border-radius:0 10px 10px 0}

/* الجداول */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:9px 8px;border-bottom:1px solid var(--cw-line);text-align:right;vertical-align:middle}
th{color:var(--cw-gold);font-weight:700;background:#121212;white-space:nowrap}
tr:hover td{background:#1b1a18}
tfoot td{font-weight:700;color:var(--cw-gold)}

/* التنبيهات والشارات */
.alert{padding:10px 14px;border-radius:10px;margin-bottom:12px;border:1px solid}
.alert.ok{background:#0f2a1d;border-color:#1d6b48;color:#9be3bf}
.alert.err{background:#2e1213;border-color:#8f1f22;color:#ffb3b5}
.alert.warn{background:#2c2108;border-color:#8a6311;color:#ffd68a}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.78rem;font-weight:700;background:#2a2a2a;color:var(--cw-text)}
.badge.waiting{background:#3a2c08;color:#ffcf5c}
.badge.washing{background:#0c2740;color:#8cc8ff}
.badge.done{background:#0f2a1d;color:#8fe0b8}
.badge.delivered{background:#262626;color:#bbb}
.badge.cancelled{background:#2e1213;color:#ff9a9d}
.badge.gold{background:var(--cw-grad);color:#111}

/* لوحة السيارة العمانية */
.plate{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#111;border:2px solid #111;border-radius:6px;
  padding:1px 8px;font-family:Changa;font-weight:700;direction:rtl;white-space:nowrap;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #c8102e}
.plate b{direction:ltr;letter-spacing:1px}
.plate i{font-style:normal;color:#c8102e}

/* الطابور */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.board{grid-template-columns:1fr}}
.col{background:#111;border:1px solid var(--cw-line);border-radius:var(--radius);padding:10px;min-height:120px}
.col h3{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}
.ticket{background:var(--cw-panel);border:1px solid var(--cw-line);border-radius:12px;padding:10px;margin-bottom:10px;display:grid;grid-template-columns:72px 1fr;gap:10px}
.ticket .ph{width:72px;height:72px;border-radius:10px;object-fit:cover;background:#000;display:grid;place-items:center;font-size:28px}
.ticket .qn{font-family:Changa;font-weight:800;color:var(--cw-gold)}
.ticket .btns{margin-top:8px}

/* الكاميرا */
.cam{border:2px dashed var(--cw-gold);border-radius:var(--radius);padding:14px;text-align:center;cursor:pointer;background:#120f08}
.cam img{max-width:100%;max-height:260px;border-radius:10px;display:block;margin:8px auto 0}
.cam input{display:none}
.svc-list label{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px;border:1px solid var(--cw-line);border-radius:10px;
  color:var(--cw-text);background:var(--cw-panel2);cursor:pointer}
.svc-list label:has(input:checked){border-color:var(--cw-orange);background:#2a1c0b}
.total-bar{display:flex;justify-content:space-between;align-items:center;font-family:Changa;font-size:1.3rem;padding:12px;border-radius:12px;background:#000;border:1px solid var(--cw-gold)}

@media print{
  .topbar,.side,.scrim,.foot,.filters .btn,.no-print{display:none!important}
  body{background:#fff;color:#000}
  .main{margin:0;padding:0;max-width:none}
  .card,.stat{background:#fff;border-color:#bbb;color:#000}
  th{background:#eee;color:#000}
  h1,h2,h3{color:#000}
  .stat .n{color:#000}
}

/* وضع المعاينة */
.demo-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:6px 12px;background:var(--cw-grad);color:#111;font-size:.85rem;text-align:center}
.demo-bar .btns{gap:6px;flex-wrap:nowrap}
.demo-bar .btn.sm{padding:4px 12px;box-shadow:0 3px 0 #7a4306}
.demo-bar .btn.ghost{background:#111;color:var(--cw-gold);border-color:#111}
body.demo .topbar{top:0;position:relative}
body.demo .side{top:auto}
body.demo main form :is(input,select,textarea,button):disabled{opacity:.55;cursor:not-allowed}