/* وشنة — نظام التصميم v2 (2026-08-23): حديث · حي · ميداني. Tajawal محلي، حركة خفيفة في كل مكان. */
@font-face{font-family:'Tajawal';src:url('/static/fonts/Tajawal-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Tajawal';src:url('/static/fonts/Tajawal-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --wine:#0f2233;--wine-d:#091623;--wine-l:#1a3a52;--wine-bg:#eef4f8;
  --palm:#1193a8;--palm-bg:#e6f5f7;
  --cream:#faf8f4;--sand:#e9e2d4;--sand-d:#d8d0c0;--ink:#26211f;--ink-2:#6d6155;
  --ok:#178a5c;--ok-bg:#e9f6ee;--warn:#b3761c;--warn-bg:#fdf3e2;--danger:#b91c29;--danger-bg:#fdeeee;
  --radius:14px;--radius-s:9px;
  --shadow:0 1px 2px rgba(38,33,31,.05),0 4px 14px rgba(38,33,31,.06);
  --shadow-h:0 2px 4px rgba(38,33,31,.07),0 10px 26px rgba(38,33,31,.10);
  --t:.2s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Tajawal','Noto Kufi Arabic',Tahoma,sans-serif;background:var(--cream);
color:var(--ink);min-height:100vh;font-size:15px;-webkit-font-smoothing:antialiased}

/* ---------- الشريط العلوي ---------- */
.topbar{background:linear-gradient(135deg,var(--wine-d),var(--wine) 55%,var(--wine-l));color:#fff;
padding:.65rem 1.1rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
justify-content:space-between;position:sticky;top:0;z-index:60;box-shadow:0 2px 12px rgba(9,22,35,.28);
overflow:hidden}
.topbar::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-50%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.08) 45%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.08) 55%,transparent);
animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-50%}90%,100%{left:110%}}
.topbar>*{position:relative;z-index:1}
.brand{font-weight:700;font-size:1.08rem;letter-spacing:.2px}
.brand span{font-weight:400;opacity:.8;font-size:.82rem}
.topbar nav{display:flex;flex-wrap:wrap;gap:.15rem;align-items:center}
.topbar a{color:#fff;text-decoration:none;padding:.4rem .7rem;border-radius:8px;font-size:.9rem;
opacity:.86;transition:background var(--t),opacity var(--t)}
.topbar a:hover{background:rgba(255,255,255,.14);opacity:1}
.topbar a.active{background:rgba(255,255,255,.18);opacity:1;font-weight:700}
.topbar a.muted{opacity:.6}

main{max-width:1180px;margin:1.1rem auto;padding:0 .9rem 3.5rem;
animation:pagein .35s cubic-bezier(.2,.7,.3,1) both}
@keyframes pagein{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

h1{font-size:1.35rem;color:var(--wine);margin:.5rem 0 .8rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
h2{font-size:1.02rem;margin:1.1rem 0 .45rem;color:var(--ink)}

/* ---------- مسار التنقل والرجوع ---------- */
.crumbs{display:flex;align-items:center;gap:.45rem;font-size:.86rem;color:var(--ink-2);margin:.2rem 0 .6rem;flex-wrap:wrap}
.crumbs a{color:var(--wine);text-decoration:none;font-weight:700}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{opacity:.45}
.backbtn{display:inline-flex;align-items:center;gap:.3rem;background:#fff;border:1px solid var(--sand-d);
color:var(--ink);border-radius:999px;padding:.32rem .85rem;font-size:.85rem;cursor:pointer;
text-decoration:none;transition:all var(--t)}
.backbtn:hover{border-color:var(--wine);color:var(--wine);transform:translateX(2px)}

/* ---------- البطاقات ---------- */
.card{background:#fff;border:1px solid var(--sand);border-radius:var(--radius);
padding:1rem 1.05rem;margin:.6rem 0;box-shadow:var(--shadow);
transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px);border-color:#ddd2be}
.card.hoverable:hover,a.card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
/* بطاقات مؤشرات ملونة بأيقونات — كسر الكآبة */
.kpi{display:flex;align-items:center;gap:.85rem}
.kico{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
font-size:1.5rem;flex-shrink:0;transition:transform .35s cubic-bezier(.3,1.4,.4,1)}
.card:hover .kico{transform:scale(1.14) rotate(-6deg)}
.card.k-wine{background:linear-gradient(135deg,#fff 30%,var(--wine-bg));border-color:#cfe0ea}
.card.k-wine .kico{background:var(--wine-bg);color:var(--wine)}
.card.k-red{background:linear-gradient(135deg,#fff 30%,var(--danger-bg));border-color:#f3cfd1}
.card.k-red .kico{background:var(--danger-bg)}
.card.k-amber{background:linear-gradient(135deg,#fff 30%,var(--warn-bg));border-color:#eeddc0}
.card.k-amber .kico{background:var(--warn-bg)}
.card.k-green{background:linear-gradient(135deg,#fff 30%,var(--ok-bg));border-color:#c6e5cf}
.card.k-green .kico{background:var(--ok-bg)}
/* عناوين بشرطة هوية */
h2{display:flex;align-items:center;gap:.5rem}
h2::before{content:"";width:4px;height:1.05em;border-radius:4px;
background:linear-gradient(180deg,var(--wine),var(--palm))}
/* محتوى details ينزلق عند الفتح */
details>*:not(summary){animation:fadeslide .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes fadeslide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
details summary::-webkit-details-marker{display:none}
.grid{display:grid;gap:.7rem}
@media(min-width:700px){.grid.cols3{grid-template-columns:repeat(3,1fr)}
.grid.cols2{grid-template-columns:repeat(2,1fr)}.grid.cols4{grid-template-columns:repeat(4,1fr)}}

.stat{font-size:1.75rem;font-weight:700;color:var(--wine);line-height:1.15;font-variant-numeric:tabular-nums}
.stat small{font-size:.74rem;color:var(--ink-2);font-weight:400;display:block;margin-top:.15rem}

/* ---------- الجداول الحديثة ---------- */
.table-wrap{overflow:auto;border-radius:var(--radius);border:1px solid var(--sand);background:#fff;
box-shadow:var(--shadow);max-height:72vh}
table{width:100%;border-collapse:collapse;background:#fff;font-size:.88rem}
thead th{position:sticky;top:0;z-index:5;background:#fff;color:var(--ink-2);padding:.6rem .65rem;
text-align:right;font-weight:700;font-size:.8rem;border-bottom:2px solid var(--sand);
white-space:nowrap;user-select:none}
thead th.sortable{cursor:pointer}
thead th.sortable:hover{color:var(--wine)}
th .colbtns{display:inline-flex;gap:.15rem;margin-inline-start:.3rem;vertical-align:middle}
th .arrow{opacity:.35;font-size:.7rem;transition:opacity var(--t)}
th.sorted .arrow{opacity:1;color:var(--wine)}
th .fbtn{border:0;background:none;cursor:pointer;font-size:.78rem;opacity:.4;padding:.1rem;transition:opacity var(--t)}
th .fbtn:hover,th .fbtn.on{opacity:1;color:var(--wine)}
td{padding:.55rem .65rem;border-bottom:1px solid #f2ede3;font-variant-numeric:tabular-nums}
tbody tr{transition:background .12s}
tbody tr:hover td{background:var(--wine-bg)}
tbody tr:last-child td{border-bottom:0}
tr.rowlink{cursor:pointer}

/* فلاتر الأعمدة */
.fpop{position:absolute;z-index:80;background:#fff;border:1px solid var(--sand-d);border-radius:12px;
box-shadow:var(--shadow-h);padding:.6rem;min-width:210px;max-width:280px;
animation:pop .16s cubic-bezier(.3,1.2,.4,1) both}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}}
.fpop input[type=text]{margin-bottom:.45rem;padding:.42rem .6rem;font-size:.85rem}
.fpop .vals{max-height:200px;overflow:auto;display:flex;flex-direction:column;gap:.1rem}
.fpop .vals label{display:flex;align-items:center;gap:.4rem;font-weight:400;font-size:.85rem;
margin:0;padding:.22rem .3rem;border-radius:6px;cursor:pointer}
.fpop .vals label:hover{background:var(--cream)}
.fpop .vals input{width:auto}
.fpop .factions{display:flex;justify-content:space-between;margin-top:.5rem;gap:.4rem}
.fpop .factions button{font-size:.8rem;padding:.3rem .7rem}
.chipbar{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--wine-bg);color:var(--wine);
border:1px solid #cfe0ea;border-radius:999px;padding:.22rem .7rem;font-size:.8rem;font-weight:700;
animation:pop .18s both}
.chip b{cursor:pointer;opacity:.7;font-weight:700}.chip b:hover{opacity:1}
.tcount{font-size:.82rem;color:var(--ink-2);margin-inline-start:auto}

/* ---------- بادجات وتنبيهات ---------- */
.badge{display:inline-block;padding:.14rem .6rem;border-radius:999px;font-size:.74rem;font-weight:700;line-height:1.5}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.danger{background:var(--danger-bg);color:var(--danger)}
.badge.wine{background:var(--wine-bg);color:var(--wine)}
.badge.plain{background:var(--cream);color:var(--ink-2);border:1px solid var(--sand)}
.alert{padding:.65rem .9rem;border-radius:var(--radius-s);margin:.4rem 0;font-size:.9rem;display:flex;gap:.5rem;align-items:flex-start}
.alert.danger{background:var(--danger-bg);color:var(--danger);border:1px solid #f3cfd1}
.alert.warn{background:var(--warn-bg);color:var(--warn);border:1px solid #eeddc0}
.alert.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #c6e5cf}

/* ---------- أزرار وحقول ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
background:linear-gradient(135deg,var(--wine),var(--wine-l));
color:#fff;border:0;border-radius:10px;padding:.55rem 1.15rem;font-size:.95rem;cursor:pointer;
text-decoration:none;font-family:inherit;font-weight:700;box-shadow:0 2px 6px rgba(15,34,51,.22);
transition:filter var(--t),transform var(--t),box-shadow var(--t)}
.btn:not(.secondary):not(.ghost):hover{filter:brightness(1.08)}
.btn:hover{background:var(--wine-d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,34,51,.3)}
.btn:active{transform:none}
.btn.secondary{background:#fff;color:var(--wine);border:1.5px solid var(--wine);box-shadow:none}
.btn.secondary:hover{background:var(--wine-bg)}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--sand-d);box-shadow:none}
.btn.big{width:100%;padding:.95rem;font-size:1.05rem;border-radius:12px}
input,select,textarea{width:100%;padding:.58rem .7rem;border:1.5px solid var(--sand-d);border-radius:10px;
font-family:inherit;font-size:.95rem;background:#fff;transition:border var(--t),box-shadow var(--t)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(15,34,51,.12)}
label{display:block;font-size:.85rem;margin:.55rem 0 .25rem;font-weight:700;color:var(--ink)}

/* ---------- عناصر متفرقة ---------- */
.field-item{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.muted{color:var(--ink-2);font-size:.85rem}
.pill-row{display:flex;gap:.4rem;flex-wrap:wrap;margin:.45rem 0}
#syncbar{position:fixed;bottom:0;right:0;left:0;background:var(--ink);color:#fff;
padding:.5rem 1rem;font-size:.85rem;display:flex;justify-content:space-between;z-index:70;
transition:background .3s}
#syncbar.ok{background:var(--ok)}#syncbar.off{background:var(--warn)}
#map{height:420px;border-radius:var(--radius)}
.day-block{border-inline-start:4px solid var(--wine);padding-inline-start:.75rem;margin:.8rem 0}

/* progress bar */
.pbar{height:8px;background:var(--sand);border-radius:99px;overflow:hidden}
.pbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--palm),#35a25c);
border-radius:99px;transition:width .8s cubic-bezier(.2,.7,.3,1)}
.pbar.warn>i{background:linear-gradient(90deg,var(--warn),#d29a3f)}

/* skeleton */
.skel{background:linear-gradient(90deg,var(--sand) 25%,#f4efe6 50%,var(--sand) 75%);
background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px;min-height:1em}
@keyframes shimmer{to{background-position:-200% 0}}

/* reveal on load */
.reveal{opacity:0;transform:translateY(10px)}
.reveal.in{opacity:1;transform:none;transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.3,1)}

/* ---------- مساعد وشنة ---------- */
#chatfab{position:fixed;bottom:1.1rem;left:1.1rem;width:56px;height:56px;border-radius:50%;
border:0;background:linear-gradient(135deg,var(--wine),var(--wine-l));color:#fff;font-size:1.5rem;
cursor:pointer;box-shadow:0 6px 20px rgba(15,34,51,.4);z-index:90;
transition:transform var(--t),box-shadow var(--t);animation:fabin .5s cubic-bezier(.3,1.4,.4,1) both .6s}
#chatfab:hover{transform:scale(1.1);box-shadow:0 8px 26px rgba(15,34,51,.5)}
@keyframes fabin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
#chatpanel{position:fixed;bottom:5.4rem;left:1.1rem;width:min(370px,92vw);height:min(520px,70vh);
background:#fff;border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.28);z-index:91;
display:none;flex-direction:column;overflow:hidden;border:1px solid var(--sand)}
#chatpanel.open{display:flex;animation:pop .22s cubic-bezier(.3,1.2,.4,1) both}
.chead{background:linear-gradient(135deg,var(--wine-d),var(--wine));color:#fff;padding:.7rem 1rem;
display:flex;justify-content:space-between;align-items:center}
.chead .cx{cursor:pointer;opacity:.8}.chead .cx:hover{opacity:1}
.cbody{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.45rem;background:var(--cream)}
.cmsg{max-width:85%;padding:.5rem .8rem;border-radius:14px;font-size:.88rem;line-height:1.55;
white-space:pre-wrap;animation:pop .18s both}
.cmsg.bot{background:#fff;border:1px solid var(--sand);border-bottom-right-radius:4px;align-self:flex-start}
.cmsg.me{background:var(--wine);color:#fff;border-bottom-left-radius:4px;align-self:flex-end}
.cmsg.wait{animation:waitpulse 1s ease-in-out infinite}
@keyframes waitpulse{50%{opacity:.45}}
.cfoot{display:flex;gap:.4rem;padding:.55rem;border-top:1px solid var(--sand);background:#fff}
.cfoot input{flex:1}
.cfoot .btn{padding:.5rem .9rem}

/* ---------- شاشة الدخول ---------- */
body.loginpage{background:linear-gradient(160deg,#07121d 0%,#0f2233 45%,#1d4360 100%);overflow:hidden}
body.loginpage main{max-width:none;margin:0;padding:0;animation:none}
.login-scene{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:hidden}
.palms{position:absolute;bottom:-6px;left:0;right:0;height:38vh;min-height:210px;opacity:.18;
color:#000;pointer-events:none}
.palms svg{width:100%;height:100%}
/* تمايل النخيل — نحرك <use> لا المجموعة حتى لا نمسح transform الموضع */
.palms .sway use{transform-box:fill-box;transform-origin:50% 96%;animation:sway 5.2s ease-in-out infinite}
.palms .sway:nth-child(odd) use{animation-duration:6.4s;animation-delay:-1.2s}
.palms .sway:nth-child(3n) use{animation-duration:7.1s;animation-delay:-2.6s}
.palms .sway:nth-child(4n) use{animation-duration:5.8s;animation-delay:-3.4s}
@keyframes sway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.sun{position:absolute;top:9%;left:12%;width:150px;height:150px;border-radius:50%;
background:radial-gradient(circle,#ffd9a0 0%,rgba(255,217,160,.25) 55%,transparent 72%);
animation:sunpulse 6s ease-in-out infinite}
@keyframes sunpulse{50%{transform:scale(1.12);opacity:.85}}
.login-box{position:relative;width:min(400px,94vw);background:rgba(255,255,255,.92);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:2rem 1.8rem 1.7rem;
border-radius:22px;border:1px solid rgba(255,255,255,.6);box-shadow:0 24px 70px rgba(0,0,0,.35);
animation:login-in .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes login-in{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.login-logo{width:64px;height:64px;border-radius:18px;background:var(--wine);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700;
margin:0 auto .8rem;box-shadow:0 8px 22px rgba(15,34,51,.4)}
.login-box h1{justify-content:center;margin:.2rem 0 .1rem;font-size:1.5rem}
.login-box .sub{text-align:center;color:var(--ink-2);font-size:.86rem;margin-bottom:1.1rem}