/* =============================================================
   وسيطتي — الأساس المشترك
   ألوان الخطّابة (--m / --f / --accent) تُحقن من الـ layout
   ============================================================= */
:root{
  --ink:#2E2833; --ink-2:#45424D; --muted:#8A8290; --faint:#9A96A3;
  --line:#DED8E4; --line-2:#EDEBF0;
  --ground:#F5F2F6; --paper:#FDFBFE;
  --ok:#2E7550; --ok-soft:#E6F2EB;
  --warn:#9A6A12; --warn-soft:#FBF1DC;
  --danger:#A3382B; --danger-soft:#FBEAE7;
  --c:var(--ink); --c-soft:var(--ground); --c-line:var(--line);

  --sans:'Ping',Tahoma,'Segoe UI',system-ui,sans-serif;
  --display:'Ping',Tahoma,sans-serif;

  --r-s:8px; --r:12px; --r-l:18px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
[data-g=m]{--c:var(--m);--c-soft:var(--m-soft);--c-line:var(--line)}
[data-g=f]{--c:var(--f);--c-soft:var(--f-soft);--c-line:var(--line)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;font-family:var(--sans);font-size:15px;line-height:1.65;color:var(--ink);background:var(--ground);
  font-feature-settings:"kern";-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:600}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--lavender-soft,#EDE8F4)}
:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}

/* ── أيقونات ───────────────────────────────────────────── */
.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-s{width:15px;height:15px}

/* ── الأزرار ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r);
  border:1px solid transparent;background:none;font-weight:500;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--c);color:#fff}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-accent{background:var(--accent,var(--mauve,#C4A2B8));color:#fff}
.btn-accent:hover:not(:disabled){filter:brightness(1.06)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{border-color:var(--line);background:var(--paper);color:var(--ink-2)}
.btn-ghost:hover:not(:disabled){border-color:var(--faint);color:var(--ink)}
.btn-danger{background:var(--danger);color:#fff}
.btn-quiet{color:var(--muted);padding:0 10px}
.btn-quiet:hover{color:var(--ink);background:var(--line-2)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:10px}
.btn-block{width:100%}
.btn.is-busy{pointer-events:none;opacity:.7}
.btn.is-busy::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── الحقول ────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.lbl{font-size:14px;font-weight:500;color:var(--ink-2)}
.req{color:var(--danger);margin-inline-start:2px}
.hint{font-size:13px;color:var(--muted);line-height:1.5}
.input,.field input:not([type=radio]):not([type=checkbox]):not([type=color]),.field select,.field textarea{
  width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  font-size:16px;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.field textarea{min-height:120px;resize:vertical;line-height:1.7}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A8290' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;padding-left:36px}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--accent,var(--mauve,#C4A2B8));box-shadow:0 0 0 3px var(--accent-soft,var(--mauve-soft,#F5EFF3))}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--danger);background:var(--danger-soft)}
.field .err{font-size:13px;color:var(--danger);min-height:0}
.field .err:empty{display:none}
.with-unit{position:relative}
.with-unit .unit{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted);pointer-events:none}
.with-unit input{padding-left:48px}

/* اختيارات بشكل أزرار (راديو / تشيك بوكس) */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.choice span{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);font-size:14px;color:var(--ink-2);transition:background .15s,border-color .15s,color .15s;user-select:none}
.choice input:hover+span{border-color:var(--faint)}
.choice input:checked+span{background:var(--c);border-color:var(--c);color:#fff}
.choice input[type=checkbox]:checked+span::before{content:"";width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);margin-inline-end:2px}
.choice input:focus-visible+span{outline:2px solid var(--c);outline-offset:2px}
.field.is-invalid .choice span{border-color:var(--danger)}

/* ── تنبيهات ───────────────────────────────────────────── */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--r);font-size:14px;line-height:1.6}
.alert-ok{background:var(--ok-soft);color:var(--ok)}
.alert-err{background:var(--danger-soft);color:var(--danger)}
.alert-warn{background:var(--warn-soft);color:var(--warn)}
.alert-info{background:var(--lavender-soft,#EDE8F4);color:var(--ink-2)}

/* ── إشعار عائم ────────────────────────────────────────── */
.toast{position:fixed;inset-inline:0;bottom:24px;margin:auto;width:max-content;max-width:calc(100vw - 32px);z-index:100;
  padding:12px 20px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:14px;box-shadow:0 10px 30px rgba(46,40,51,.25);
  opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.toast.err{background:var(--danger)}

/* ── حبوب الحالة ───────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag-new{background:var(--mauve-soft,#F5EFF3);color:var(--plum-deep,#5E4E6B)}
.tag-progress{background:#EEF0F7;color:#3F4C77}
.tag-active{background:var(--ok-soft);color:var(--ok)}
.tag-paused{background:#F1EFF3;color:var(--muted)}
.tag-done{background:var(--ok);color:#fff}.tag-done::before{background:#fff}
.tag-closed{background:#F1EFF3;color:var(--faint)}
.g-dot{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.g-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}