/* Midkhal brand layer for the tenant dashboard (loaded after admin.css on the platform). Remaps the dashboard tokens to the
   Midkhal palette and adds the SaaS widgets: banners, onboarding checklist, plan badge, billing/checkout, help threads. */
:root{
  --brand:#1F2937;--accent:#F43F5E;--ink:#1F2937;--muted:#6B7280;--line:#E5E7EB;--bg:#F9FAFB;--card:#fff;--side:#111827;
  --ok:#16A34A;--bad:#E11D48;--warn:#B45309;--r:14px;--font:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;--display:'Noto Kufi Arabic','IBM Plex Sans Arabic',Tahoma,sans-serif;
  --mk-red:#F43F5E;--mk-red-dark:#E11D48;--mk-green:#16A34A;--mk-pink:#FFE4E9;--focus:0 0 0 3px rgba(244,63,94,.35);
  --stripe:repeating-linear-gradient(-45deg,#F43F5E 0 14px,#fff 14px 28px);
}
body{line-height:1.7;font-size:15px}
h1,h2,h3{font-weight:800}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.btn{border-radius:8px;min-height:42px;transition:filter .15s,transform .1s,background-color .15s}.btn:active{transform:scale(.98)}.btn:hover{filter:brightness(.94)}
.btn-primary{background:var(--ink)}.btn-primary:hover{filter:brightness(1.15)}
.btn-red,.btn-accent{background:var(--mk-red);color:#fff}.btn-red:hover,.btn-accent:hover{background:var(--mk-red-dark);filter:none}
.btn-ghost{box-shadow:inset 0 0 0 1px var(--line)}
.btn-danger{background:#FFF1F2;color:var(--mk-red-dark)}
.panel,.kpi{border-radius:14px;box-shadow:none}.panel:hover{border-color:rgba(31,41,55,.2)}
.kpi-ic{background:#F3F4F6;color:var(--ink)}.k-brand .kpi-ic{background:var(--ink)}.k-accent .kpi-ic{background:var(--mk-red)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:var(--focus);outline:none}
.flash{background:#F0FDF4;color:#166534}.flash.err{background:#FFF1F2;color:#9F1239}
.chart .b1{fill:#D1D5DB}.chart .b2{fill:var(--ink)}.l1{background:#D1D5DB}.l2{background:var(--ink)}
.ring{background:conic-gradient(var(--ink) calc(var(--p)*1%),#E5E7EB 0)}
.today-banner{background:var(--ink)}.today-banner.closed{background:#7F1D1D}
.badge.b-valid,.b-admitted,.b-paid{background:#DCFCE7;color:#166534}.b-used,.b-cancelled{background:#FFE4E9;color:#E11D48}.b-pending,.b-unpaid{background:#FEF3C7;color:#B45309}

/* sidebar */
.side{background:#111827}
.side-brand .sb-mark{width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;background:#fff;border-radius:10px;overflow:hidden}
.side-brand .sb-mark .mk-symbol{width:28px;height:28px}.side-brand .sb-mark img{width:100%;height:100%;object-fit:contain}
.side nav a.on{background:#1F2937;box-shadow:inset 3px 0 0 var(--mk-red)}[dir=rtl] .side nav a.on{box-shadow:inset -3px 0 0 var(--mk-red)}
.side nav a.locked{opacity:.65}
.side-by{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 8px 0;margin-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.side-by img{height:18px;width:auto;opacity:.9}.fz-badge{display:inline-flex;gap:5px;align-items:center;font-size:11px;color:rgba(255,255,255,.6);text-decoration:none}
.fz-badge b{font:700 11px/1 'IBM Plex Sans Arabic',sans-serif;letter-spacing:1.5px;color:#fff;direction:ltr}
.av{background:var(--mk-red)}
.plan-tag{display:flex;align-items:center;gap:6px;margin:8px 4px;padding:8px 10px;border-radius:10px;background:#1F2937;color:#E5E7EB;font-size:.82rem}
.plan-tag span{margin-inline-start:auto;color:#FDA4AF;font-weight:700}

/* top bar */
.bar{background:rgba(249,250,251,.92)}
.plan-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#F3F4F6;color:#374151;text-decoration:none}
.plan-badge.pro{background:#FFE4E9;color:#BE123C}.plan-badge.business{background:#1F2937;color:#fff}
.plan-badge .up{color:#E11D48;font-weight:700}

/* banners */
.impersonate-bar{background:#F59E0B;color:#111827;text-align:center;padding:8px 12px;font-weight:700;font-size:14px;position:sticky;top:0;z-index:40}
.banners{display:grid;gap:10px;margin-bottom:18px}
.bnr{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;font-size:14px;flex-wrap:wrap}
.bnr .act{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.bnr.warn{background:#FFFBEB;border-color:#FDE68A;color:#92400E}.bnr.err{background:#FFF1F2;border-color:#FECDD3;color:#9F1239}.bnr.info{background:#F9FAFB}
.bnr.ann{background:#111827;color:#fff;border-color:#111827}.bnr.ann b{color:#fff}.bnr.ann button,.bnr.ann a{color:#FDA4AF}
.bnr button.x{background:none;border:0;cursor:pointer;font:inherit;padding:2px 6px;color:inherit;opacity:.7}

/* onboarding checklist */
.onb{border:1px solid var(--line);border-radius:14px;background:#fff;padding:20px;margin-bottom:20px}
.onb-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.onb-bar{height:8px;border-radius:999px;background:#F3F4F6;overflow:hidden;margin:6px 0 14px}.onb-bar i{display:block;height:100%;background:var(--mk-green);border-radius:inherit;transition:width .6s}
.onb ol{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.onb li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.onb li .ck{width:26px;height:26px;border-radius:50%;border:2px solid #D1D5DB;display:grid;place-items:center;flex-shrink:0;color:#fff}
.onb li.done .ck{background:var(--mk-green);border-color:var(--mk-green)}.onb li.done .t{color:var(--muted);text-decoration:line-through}
.onb li .go{margin-inline-start:auto}.onb li .lockt{font-size:12px;color:#BE123C;font-weight:600}
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* plan cards, billing */
.sec-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.period-toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.period-toggle button{border:0;background:transparent;font:600 13px var(--font);padding:7px 16px;border-radius:999px;cursor:pointer;color:var(--muted)}
.period-toggle button[aria-pressed=true]{background:var(--ink);color:#fff}.period-toggle .save{color:#BE123C;font-size:11px;margin-inline-start:4px}.period-toggle button[aria-pressed=true] .save{color:#FECDD3}
.plan-card{border-radius:14px}.plan-card.pop{border:2px solid var(--mk-red)}.pc-badge{background:var(--ink)}.pc-badge.alt{background:var(--mk-red)}
.btn.block{width:100%}
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#F3F4F6;color:#6B7280}
.tag-ok{background:#DCFCE7;color:#166534}.tag-err{background:#FFE4E9;color:#E11D48}.tag-pending{background:#FEF3C7;color:#B45309}
.notice{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;margin-bottom:16px;flex-wrap:wrap}
.notice.warn{background:#FFFBEB;border-color:#FDE68A;color:#92400E}
.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;font-size:14px}.table th,.table td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:start}.table th{color:var(--muted);font-size:12px}
.pay-card{max-width:560px;margin:10px auto 30px;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.pay-card .stripe{height:12px;background:var(--stripe)}.pay-card .in{padding:26px}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.sum-row.total{font-weight:800;font-size:18px;border-bottom:0}
.beneficiary{background:#F9FAFB;border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:13px;color:#374151}
.pay-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.pay-badges span{border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-size:12px;font-weight:600;background:#fff}
.coupon-row{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.hint-bad{color:#E11D48;font-size:13px;font-weight:600}.hint-ok{color:#16A34A;font-size:13px;font-weight:600}
.copy-row{display:flex;gap:8px;align-items:center}.copy-row code{flex:1;direction:ltr;text-align:left;background:#F9FAFB;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;overflow-x:auto;white-space:nowrap}
.steps-live{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}
.steps-live li{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.steps-live li .dot{width:22px;height:22px;border-radius:50%;border:2px solid #D1D5DB;flex-shrink:0}
.steps-live li.done .dot{background:#16A34A;border-color:#16A34A}.steps-live li.now .dot{border-color:#F59E0B;background:#FEF3C7}
.steps-live li.fail .dot{border-color:#E11D48;background:#FFE4E9}

/* success card + motion */
.success-card{animation:mk-pop 250ms ease-out both}.success-card .stripe{animation:mk-stripe-in 400ms ease-out both}
.ok-circle{width:96px;height:96px;border-radius:50%;background:var(--mk-green);display:grid;place-items:center;margin:0 auto 16px}
.ok-circle .mk-symbol{width:62px;height:62px;--mk-post:#fff;--mk-arm:#fff;--mk-stripe:var(--mk-green)}
.mk-symbol{display:block;overflow:visible}.mk-arm{transform-origin:78px 44px;transform-box:view-box}
.mk-closed .mk-arm,.mk-symbol.mk-closed .mk-arm{transform:rotate(0)}
.mk-open .mk-arm{animation:mk-lift 450ms cubic-bezier(.34,1.56,.64,1) both}
.mk-spin .mk-arm{animation:mk-osc 900ms ease-in-out infinite}
.spinner{display:block;width:56px;height:56px;margin:0 auto}
@keyframes mk-lift{0%{transform:rotate(0)}70%{transform:rotate(36deg)}100%{transform:rotate(32deg)}}
@keyframes mk-osc{0%,100%{transform:rotate(0)}50%{transform:rotate(32deg)}}
@keyframes mk-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes mk-stripe-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes mk-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;background:#1F2937;color:#fff;padding:12px 18px;border-radius:14px;box-shadow:0 8px 24px rgba(17,24,39,.08);font-size:14px}
.skeleton{border-radius:8px;background:linear-gradient(90deg,#E5E7EB 25%,#F3F4F6 50%,#E5E7EB 75%);background-size:200% 100%;animation:mk-shimmer 1.2s linear infinite;min-height:14px}

/* gate scanner: full-screen result with the barrier arm */
.gate-flash{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff;text-align:center;padding:24px}
.gate-flash.show{display:flex}.gate-flash.ok{background:#16A34A}.gate-flash.bad{background:#E11D48}.gate-flash.warn{background:#B45309}
.gate-flash .gf-sym{width:min(46vw,220px)}.gate-flash .mk-symbol{width:100%;height:auto}
.gate-flash.ok .mk-symbol{--mk-stripe:#16A34A}.gate-flash.bad .mk-symbol{--mk-stripe:#E11D48}.gate-flash.warn .mk-symbol{--mk-stripe:#B45309}
.gate-flash .gf-msg b{display:block;font:800 clamp(26px,6vw,44px)/1.3 var(--display)}.gate-flash .gf-msg small{font-size:18px;opacity:.9}
.gate-flash.ok .gf-msg{animation:mk-fadeup .3s 600ms ease-out both}
.mk-shake{animation:mk-shake 300ms ease-in-out 1}
@keyframes mk-shake{0%,100%{transform:translateX(0)}12.5%,62.5%{transform:translateX(-6px)}37.5%,87.5%{transform:translateX(6px)}}
@keyframes mk-fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gate-flash .mk-open .mk-arm{animation:none;transform:rotate(32deg)}.mk-shake,.gate-flash.ok .gf-msg{animation:none}}

/* help / support threads */
.thread{display:grid;gap:12px}.msg{border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:#fff;max-width:85%}
.msg.op{background:#F9FAFB;margin-inline-start:auto}.msg small{color:var(--muted);display:block;margin-bottom:4px}

/* login (platform) */
.login-art{background:#111827;position:relative;overflow:hidden}.login-art .mk-symbol{width:96px;height:96px;--mk-post:#fff}
.login-art .stripe{position:absolute;bottom:0;left:0;right:0;height:10px;background:var(--stripe)}
.login-by{display:flex;gap:10px;align-items:center;margin-top:28px;opacity:.9}.login-form{display:grid;gap:14px}

@media (prefers-reduced-motion:reduce){.mk-open .mk-arm,.mk-spin .mk-arm,.success-card,.success-card .stripe,.skeleton{animation:none}.mk-open .mk-arm{transform:rotate(32deg)}.onb-bar i{transition:none}}