/* ---------------------------------------------------------------------------
 * ui.css — the shared UI widgets: the feedback modal, the header notification
 * bell, the status toast and the follow button.
 *
 * These used to live as <style> blocks inside PHP render_*() functions in
 * lib_auth.php / lib_notify.php. They are here so a stylesheet is a stylesheet:
 * editable, lintable, cached, and out of a library whose job is sessions and
 * OTP. Emitted by render_ui() (lib_ui.php), which every widget calls.
 *
 * Every colour is var(--token, <literal>) ON PURPOSE. These widgets render on
 * pages that do NOT load app.css — the login page most of all — so the literal
 * is the standalone look and the variable is what the rest of the site
 * overrides it with. Do not "clean up" the fallbacks.
 * ------------------------------------------------------------------------- */

/* ========================================================================
 * يهمنا رأيك — the visitor feedback modal
 * ======================================================================== */
/* Self-contained: index.php (the login page) renders the banner but loads NO app.css, and its
   palette is --panel/--sec/--blue rather than --card/--muted/--accent. Every colour below is
   therefore var(--x,<literal>) — the literal is what the login page gets, the variable is what
   the rest of the site overrides it with. */
/* DEFENSIVE: index.php styles every button on the login page with a bare `button{width:100%;
   margin-top:20px;background:var(--blue);…}` selector. A class rule that only sets colour loses
   to that on width/margin/display, which is what turned «هنا» into a full-width block. Every
   button below therefore declares width, margin AND display explicitly — never rely on the
   element default, because this widget renders on pages whose global CSS it does not control. */
.fb-link,.fb-cta,.fbm-x,.fbm-send{width:auto;margin:0;font-family:inherit}
.fb-link{display:inline;border:0;background:transparent;padding:0;font:inherit;font-weight:700;
  cursor:pointer;color:var(--accent,#0071e3);text-decoration:underline;text-underline-offset:2px}
.fb-link:hover{color:var(--accentd,#0077ed)}
.fb-cta{display:inline-block;border:0;border-radius:10px;padding:11px 22px;font:inherit;font-size:14px;
  font-weight:700;cursor:pointer;background:var(--accent,#0071e3);color:#fff}
.fb-cta:hover{background:var(--accentd,#0077ed)}
.fbm{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:18px}
.fbm[hidden]{display:none}
.fbm-ov{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.fbm-card{position:relative;width:100%;max-width:460px;padding:26px;border-radius:14px;
  background:var(--card,#fff);color:var(--text,#1d1d1f);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.fbm-x{position:absolute;top:12px;inset-inline-end:14px;width:26px;height:26px;padding:0;border:0;
  background:transparent;color:var(--soft,#86868b);font:400 22px/1 system-ui;cursor:pointer}
.fbm-x:hover{color:var(--text,#1d1d1f)}
.fbm-card h2{margin:0 0 6px;font-size:19px;font-weight:800}
.fbm-sub{margin:0 0 14px;color:var(--muted,#6e6e73);font-size:13px;line-height:1.6}
.fbm-card textarea{width:100%;margin:0;padding:12px 14px;border:1px solid var(--line,#d2d2d7);
  border-radius:10px;background:#fff;color:var(--text,#1d1d1f);font:inherit;font-size:14px;
  line-height:1.7;resize:vertical;direction:rtl;text-align:start}
.fbm-card textarea:focus{outline:none;border-color:var(--accent,#0071e3);
  box-shadow:0 0 0 3px var(--accentbg,rgba(0,113,227,.12))}
.fbm-card textarea:disabled{background:var(--greybg,#f1f5f9);color:var(--muted,#6e6e73)}
/* Guest reply-to (2026-09-07). Shares the textarea's shell so the two read as one field pair.
   NO direction here on purpose — the field holds either a Latin email or a phone number, so the
   markup carries dir="auto" and the browser picks per content instead of forcing RTL onto both. */
.fbm-contact{width:100%;margin:10px 0 0;padding:11px 14px;border:1px solid var(--line,#d2d2d7);
  border-radius:10px;background:#fff;color:var(--text,#1d1d1f);font:inherit;font-size:14px;
  line-height:1.6;text-align:start}
.fbm-contact:focus{outline:none;border-color:var(--accent,#0071e3);
  box-shadow:0 0 0 3px var(--accentbg,rgba(0,113,227,.12))}
.fbm-contact:disabled{background:var(--greybg,#f1f5f9);color:var(--muted,#6e6e73)}
.fbm-contact.bad{border-color:var(--red,#e30000);box-shadow:0 0 0 3px rgba(227,0,0,.10)}
.fbm-why{margin:6px 2px 0;color:var(--muted,#6e6e73);font-size:12px;line-height:1.6}
.fbm-f{display:flex;align-items:center;gap:12px;margin-top:14px}
.fbm-note{flex:1;font-size:12.5px;font-weight:600;color:var(--muted,#6e6e73)}
.fbm-note.ok{color:var(--green,#0a7d28)} .fbm-note.err{color:var(--red,#e30000)}
.fbm-send{flex:none;border:0;border-radius:10px;padding:10px 24px;font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;background:var(--accent,#0071e3);color:#fff}
.fbm-send:hover:not(:disabled){background:var(--accentd,#0077ed)}
.fbm-send:disabled{opacity:.6;cursor:default}
@media (max-width:720px){ .fbm-card{padding:20px} }

/* ========================================================================
 * التنبيهات — the header notification bell
 * ======================================================================== */
.nbell-wrap{position:relative;display:inline-flex}
.nbell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  padding:0;border:1px solid var(--line,#e5e9f0);border-radius:9px;background:var(--card,#fff);
  color:var(--muted,#64748b);cursor:pointer;font-family:inherit}
.nbell:hover{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb)}
.nbell.on{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb);background:var(--accentbg,#eff6ff)}
.nbell-badge{position:absolute;top:-6px;inset-inline-start:-6px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--red,#dc2626);color:#fff;font-size:10.5px;font-weight:800;
  display:none;align-items:center;justify-content:center;line-height:1;font-variant-numeric:tabular-nums}
.nbell-badge.show{display:inline-flex}

/* ------------------------------------------------------------------------
 * حسابي — the account menu (a native <details>; ui.js closes it on an outside tap).
 * The trigger is the bell's twin: same 30px box, border, radius and colours, plus the
 * label on wide screens. The list borrows .nbell-pop's card so the header has one look.
 * ---------------------------------------------------------------------- */
.umenu{position:relative}
.umenu summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:30px;min-width:30px;padding:0 9px;border:1px solid var(--line,#e5e9f0);border-radius:9px;
  background:var(--card,#fff);color:var(--muted,#64748b);font-size:12.5px;cursor:pointer;user-select:none}
.umenu summary::-webkit-details-marker{display:none}
.umenu summary:hover,.umenu[open] summary{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb)}
.umenu-pop{position:absolute;z-index:200;top:calc(100% + 8px);inset-inline-end:0;min-width:190px;padding:5px;
  background:var(--card,#fff);border:1px solid var(--line,#e5e9f0);border-radius:12px;
  box-shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.05)}
.umenu-pop a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;
  color:var(--text,#0f172a);font-size:13px;text-decoration:none;white-space:nowrap}
.umenu-pop a svg{color:var(--muted,#64748b);flex:none}
.umenu-pop a:hover{background:var(--line2,#eef2f7);text-decoration:none}
.umenu-pop a[aria-current]{font-weight:700;color:var(--accent,#2563eb)}
.umenu-pop a[aria-current] svg{color:var(--accent,#2563eb)}
@media (max-width:720px){
  .umenu summary{width:30px;padding:0}
  .umenu summary .lotext{display:none}
}
.nbell-pop{position:absolute;z-index:200;top:calc(100% + 8px);inset-inline-end:0;width:330px;max-width:86vw;
  background:var(--card,#fff);border:1px solid var(--line,#e5e9f0);border-radius:14px;
  box-shadow:0 18px 44px rgba(15,23,42,.18);padding:6px;text-align:start}
.nbell-pop[hidden]{display:none}
/* On a phone the bell sits near the screen edge, so an absolute panel anchored to it always
   overflows one side. Fixed + both inline insets = full width, no anchor, no overflow; the top
   comes from the button's viewport rect (--nbtop, set by ui.js on open). */
@media (max-width:600px){
  .nbell-pop{position:fixed;inset-inline:8px;top:var(--nbtop,64px);width:auto;max-width:none}
  .nbell-list{max-height:min(55vh,320px)}
}
.nbell-hd{display:flex;align-items:center;gap:8px;padding:8px 10px 7px;border-bottom:1px solid var(--line2,#eef2f7)}
.nbell-hd b{font-size:13px;font-weight:800;flex:1}
.nbell-all{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;
  border:0;border-radius:8px;background:none;cursor:pointer;color:var(--soft,#94a3b8)}
.nbell-all:hover{color:var(--accent,#2563eb);background:var(--accentbg,#eff6ff)}
.nbell-all[hidden]{display:none}
.nbell-list{max-height:320px;overflow:auto;padding:3px 0}
.nbell-it{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:9px;text-decoration:none;color:inherit}
.nbell-it:hover{background:var(--accentbg,#eff6ff)}
.nbell-it.unread .nbell-nm{font-weight:800}
.nbell-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
/* the event type, named — this is the line that tells you what the row IS */
.nbell-kd{font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--accent,#2563eb)}
.nbell-kd.award{color:#a16207}
.nbell-kd.bad{color:#b91c1c}
.nbell-nm{font-size:12.5px;font-weight:700;line-height:1.5;color:var(--text,#0f172a);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nbell-mt{font-size:11px;color:var(--soft,#94a3b8);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* read/unread toggle at the row end — filled while unread, hollow once read, and it IS the
   unread marker (there is no second dot at the row start) */
.nbell-tg{flex:none;width:22px;height:22px;margin-top:3px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;cursor:pointer}
.nbell-tg::after{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--soft,#94a3b8)}
.nbell-it.unread .nbell-tg::after{background:var(--accent,#2563eb);border-color:var(--accent,#2563eb)}
.nbell-tg:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--line,#e5e9f0)}
.nbell-ft{display:block;text-align:center;padding:9px 10px 8px;margin-top:2px;
  border-top:1px solid var(--line2,#eef2f7);font-size:12px;font-weight:700;
  color:var(--accent,#2563eb);text-decoration:none;border-radius:0 0 10px 10px}
.nbell-ft:hover{background:var(--accentbg,#eff6ff)}
.nbell-empty{padding:20px 12px;text-align:center;color:var(--soft,#94a3b8);font-size:12.5px;line-height:1.7}

/* ========================================================================
 * window.toast — the one status toast
 * ======================================================================== */
/* Centred with margin-inline:auto rather than left:50% + translate(-50%): that freed `transform`
   entirely, which the swipe-to-dismiss gesture needs to drive. margin-inline is also RTL-correct
   by definition, unlike the physical pair it replaces. */
/* z-index 1090 = Bootstrap's own $zindex-toast, deliberately ABOVE its modal (1055) and backdrop
   (1050), and above this app's stacking too (.ntm editor 240, #ntFlash 300). A toast raised from
   inside an open dialog — «تم الحفظ ✓» after saving in the add-email modal — must be visible;
   at a lower value it renders behind the dialog exactly when it is needed. */
.ntoast{position:fixed;left:0;right:0;bottom:28px;margin-inline:auto;width:max-content;max-width:88vw;
  z-index:1090;background:#0f172a;color:#fff;font:inherit;font-size:13.5px;font-weight:600;
  padding:12px 20px;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.28);
  opacity:0;transform:translateY(20px);pointer-events:none;cursor:pointer;
  user-select:none;-webkit-user-select:none;touch-action:none;
  transition:opacity .2s,transform .2s}
/* pointer-events only while visible, so a hidden toast never swallows a click on the page. */
.ntoast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.ntoast.bad{background:#b4423a}
/* During a drag the element must follow the finger exactly — no transition to fight it. */
.ntoast.swiping{transition:none}
@media (prefers-reduced-motion:reduce){.ntoast{transition:none}}

/* ========================================================================
 * One-click follow (company / agency)
 * ======================================================================== */
.flwbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line,#e5e9f0);background:var(--card,#fff);
  border-radius:9px;padding:7px 14px;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted,#64748b);cursor:pointer}
.flwbtn:hover{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb)}
.flwbtn svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flwbtn.on{border-color:var(--accent,#2563eb);color:var(--accent,#2563eb);background:var(--accentbg,#eff6ff)}
.flwbtn.on svg{fill:currentColor}
.flwm{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;padding:18px}
.flwm-ov{position:absolute;inset:0;background:rgba(0,0,0,.5);animation:flwm-fade .18s ease-out}
.flwm-card{position:relative;width:100%;max-width:380px;padding:24px;border-radius:16px;text-align:center;
  background:var(--card,#fff);color:var(--text,#0f172a);box-shadow:0 24px 64px rgba(0,0,0,.32);
  animation:flwm-pop .24s cubic-bezier(.26,1.2,.4,1)}
/* enter: backdrop fades, the card rises with a gentle spring pop (Bootstrap's modal slides from
   -50px; this is the same idea, subtler). exit: .closing reverses both, and the JS removes the
   node after the transition — the promise/action resolves immediately, only the pixels linger. */
@keyframes flwm-fade{from{opacity:0}}
@keyframes flwm-pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.flwm.closing .flwm-ov{opacity:0;transition:opacity .16s ease-in}
.flwm.closing .flwm-card{opacity:0;transform:translateY(10px) scale(.97);transition:opacity .16s ease-in,transform .16s ease-in}
@media (prefers-reduced-motion:reduce){
  .flwm-ov,.flwm-card{animation:none}
  .flwm.closing .flwm-ov,.flwm.closing .flwm-card{transition:none}
}
.flwm-card h3{margin:0 0 6px;font-size:17px;font-weight:800}
.flwm-card p{margin:0 0 16px;color:var(--muted,#64748b);font-size:13px;line-height:1.7}
.flwm-opt{display:flex;gap:9px;align-items:center;border:1.5px solid var(--line,#e5e9f0);border-radius:11px;
  padding:11px 13px;margin-bottom:9px;cursor:pointer;text-align:start;font-size:13.5px;font-weight:700}
.flwm-opt.on{border-color:var(--accent,#2563eb);background:var(--accentbg,#eff6ff);color:var(--accent,#2563eb)}
.flwm-est{margin-inline-start:auto;font-size:11px;font-weight:600;color:var(--muted,#64748b);white-space:nowrap}
.flwm-acts{display:flex;gap:9px;justify-content:center;margin-top:16px}
.flwm-btn{border:1px solid var(--line,#e5e9f0);background:#fff;border-radius:10px;padding:9px 20px;font:inherit;
  font-size:13.5px;font-weight:700;cursor:pointer;color:var(--muted,#64748b)}
.flwm-btn.primary{background:var(--accent,#2563eb);border-color:var(--accent,#2563eb);color:#fff}
.flwm-btn.danger{background:var(--red,#dc2626);border-color:var(--red,#dc2626);color:#fff}