/* Core Events — app pages UI kit (desk / admin / certificate). Logical properties → RTL-safe. */
:root{
  --ivory:#f7f1e6;--ivory-2:#f1e8d7;--paper:#fbf8f2;--sand:#e7dcc4;--line:rgba(184,145,78,.32);
  --gold:#b8914e;--gold-2:#d8b46a;--gold-deep:#9a7736;--ink:#1c1811;--ink-2:#4a4132;--ink-soft:#8a7d66;--navy:#2b4a76;
  --ok:#3d7a4f;--bad:#a34a3a;
  --serif:'Cinzel',Georgia,serif;--sans:'Poppins',system-ui,sans-serif;--ease:cubic-bezier(.22,.61,.36,1);
}
html.is-ar{--serif:'Cairo','Cinzel',sans-serif;--sans:'Almarai','Poppins',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--paper);line-height:1.55;min-height:100vh;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15}
.is-ar h1,.is-ar h2,.is-ar h3{font-weight:600}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
.is-ar .eyebrow,.is-ar .btn,.is-ar .pill,.is-ar .tab,.is-ar .th,.is-ar .k,.is-ar .brand-name b,.is-ar .brand-name span{letter-spacing:0!important}
.muted{color:var(--ink-soft)}
.hidden{display:none!important}

/* topbar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:12px clamp(16px,3vw,32px);background:rgba(251,248,242,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:40px;height:40px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.brand-name{line-height:1}
.brand-name b{font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:.28em;font-size:12.5px;display:block}
.brand-name span{display:block;font-size:7px;letter-spacing:.3em;color:var(--gold-deep);margin-top:3px;font-weight:500}
.topbar .grow{flex:1}
.topbar .page-title{font-family:var(--serif);font-size:15px;color:var(--ink-2);padding-inline-start:16px;border-inline-start:1px solid var(--line)}
.lang-sw{display:inline-flex;border:1px solid var(--gold);border-radius:999px;overflow:hidden}
.lang-sw button{background:transparent;border:0;padding:6px 12px;font-size:11px;font-weight:600;letter-spacing:.08em;cursor:pointer;color:var(--ink-2)}
.lang-sw button.on{background:var(--gold);color:#fff}
.who{font-size:12px;color:var(--ink-soft)}
.who b{color:var(--gold-deep);font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:13px 20px;border:1px solid var(--gold);background:var(--gold);color:#fff;cursor:pointer;border-radius:2px;transition:background .3s,color .3s,transform .3s var(--ease),opacity .3s;white-space:nowrap}
.btn:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--gold-deep)}
.btn.ghost:hover{background:var(--ivory)}
.btn.dark{background:var(--ink);border-color:var(--ink)}
.btn.dark:hover{background:#000}
.btn.danger{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.sm{padding:9px 14px;font-size:10.5px}
.btn svg{width:16px;height:16px}
.icon-btn{width:38px;height:38px;border:1px solid var(--line);background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
.icon-btn svg{width:18px;height:18px}

/* forms */
.field{display:grid;gap:7px}
.field label,.k{font-size:11px;line-height:1.55;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.input,.field input,.field select,.field textarea{width:100%;font-size:14px;background:var(--ivory);border:1px solid var(--line);padding:12px 14px;border-radius:2px;transition:border-color .3s,box-shadow .3s}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,145,78,.15);background:#fff}
.field textarea{min-height:90px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 16px}
.full{grid-column:1/-1}
.check{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.check input{width:18px;height:18px;accent-color:var(--gold)}

/* layout & cards */
.wrap{padding:clamp(16px,3vw,32px);max-width:1440px;margin:0 auto}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:clamp(16px,2.2vw,26px);box-shadow:0 20px 50px -40px rgba(28,24,17,.35)}
.card.tint{background:var(--ivory)}
.card h2{font-size:20px;margin-bottom:6px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--ivory);border:1px solid var(--line);padding:16px 18px;border-radius:4px}
.kpi b{font-family:var(--serif);font-size:30px;line-height:1;display:block;color:var(--ink)}
.kpi span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px;display:block}
.is-ar .kpi span{letter-spacing:0}
.pill{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:5px 9px;border-radius:999px;background:var(--ivory-2);color:var(--ink-2);border:1px solid var(--line)}
.pill.vip{background:linear-gradient(120deg,var(--gold-deep),var(--gold-2));color:#fff;border-color:transparent}
.pill.ok{background:#e6f0e8;color:var(--ok);border-color:#c7dccb}
.pill.draft{background:#f1ede4;color:var(--ink-soft)}
.pill.active{background:#e6f0e8;color:var(--ok);border-color:#c7dccb}
.pill.archived{background:#efe6e2;color:var(--bad);border-color:#e0cbc3}

/* tables */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;text-align:start;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.is-ar .table th{letter-spacing:0}
.table td{padding:11px 12px;border-bottom:1px solid rgba(184,145,78,.16);vertical-align:middle}
.table tr:hover td{background:rgba(247,241,230,.7)}
.table tr.sel td{background:var(--ivory-2)}
.table .num{font-variant-numeric:tabular-nums;color:var(--gold-deep);font-weight:600}
.table-wrap{overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:4px;background:#fff}
.table-wrap thead th{position:sticky;top:0;background:#fff;z-index:1}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow:auto}
.tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:12px 16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.tab.on{color:var(--gold-deep);border-bottom-color:var(--gold)}

/* gate (login) */
.gate{min-height:calc(100vh - 66px);display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse 60% 50% at 50% 30%,rgba(216,180,106,.18),transparent 70%),var(--paper)}
.gate .card{width:min(420px,100%);text-align:center}
.gate .mark{width:72px;height:72px;margin:0 auto 14px}
.gate h1{font-size:22px;margin:0 0 6px}
.gate p{color:var(--ink-soft);font-size:13px;margin-bottom:22px}
.gate .field{text-align:start}
.gate .err{color:var(--bad);font-size:12px;min-height:1.2em;margin-top:10px}
.demo-note{margin-top:16px;font-size:11.5px;color:var(--ink-soft);background:var(--ivory);border:1px dashed var(--line);padding:10px 12px;border-radius:4px;text-align:start}
.demo-note code{background:#fff;padding:1px 6px;border-radius:3px;color:var(--gold-deep)}

/* toast & modal */
.toast{position:fixed;inset-inline-start:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:4px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);z-index:60;max-width:min(92vw,520px)}
[dir=rtl] .toast{transform:translateX(50%) translateY(20px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
[dir=rtl] .toast.show{transform:translateX(50%) translateY(0)}
.toast.bad{background:var(--bad)}
.modal{position:fixed;inset:0;background:rgba(28,24,17,.55);display:grid;place-items:center;padding:20px;z-index:50}
.modal .card{width:min(560px,100%);max-height:92vh;overflow:auto}
.modal .card h2{margin-bottom:14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.banner{background:var(--ivory-2);border:1px solid var(--line);padding:10px 14px;border-radius:4px;font-size:12.5px;color:var(--ink-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.banner b{color:var(--gold-deep)}
.empty{padding:34px;text-align:center;color:var(--ink-soft);font-size:13px}

/* ID card (desk + print) */
.idcard{width:300px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -28px rgba(26,23,18,.55);position:relative;margin:0 auto}
.idcard .top{background:linear-gradient(150deg,#1c1811,#2c2417 70%,#3a2f1c);color:#fff;padding:22px 22px 44px;text-align:center;position:relative}
.idcard .top svg{width:52px;height:52px;margin:0 auto 8px}
.idcard .top .cev{font-family:'Poppins',sans-serif;letter-spacing:.28em;font-size:12px;color:#f3ead6;font-weight:600}
.idcard .top .cev span{display:block;font-size:7px;letter-spacing:.3em;color:var(--gold-2);margin-top:3px}
.idcard .type-pill{position:absolute;inset-inline-start:50%;bottom:-14px;transform:translateX(-50%);background:linear-gradient(120deg,var(--gold-deep),var(--gold-2));color:#fff;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;padding:7px 16px;border-radius:999px;white-space:nowrap}
[dir=rtl] .idcard .type-pill{transform:translateX(50%)}
.idcard .body{padding:30px 20px 18px;text-align:center}
.idcard .nm{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.2;min-height:50px;display:flex;align-items:center;justify-content:center}
.idcard .ar{font-family:'Cairo','Almarai',sans-serif;font-size:15px;color:var(--ink-2);margin-top:4px;min-height:1.4em;direction:rtl}
.idcard .org{color:var(--ink-soft);font-size:11px;margin-top:4px;min-height:1.3em}
.idcard .idrow{margin:16px 0 4px;padding:12px;border-radius:12px;background:#f6f0e6;border:1px dashed var(--line)}
.idcard .idrow .v{font-family:'Poppins',sans-serif;font-weight:700;font-size:30px;color:var(--gold-deep);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.idcard .foot{background:#f3ead9;border-top:1px solid var(--line);padding:10px 12px;text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);line-height:1.5}
.idcard.empty-state .nm{color:#c4b89e;font-weight:500;font-size:15px}
#printMount{display:none}
@media print{
  body>*:not(#printMount){display:none!important}
  #printMount{display:flex!important;justify-content:center;padding-top:6mm}
  #printMount .idcard{box-shadow:none;width:320px}
  #printMount .idcard,#printMount .idcard *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}

/* responsive */
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}.topbar .page-title{display:none}}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}.wrap{padding:14px}.card{padding:16px}.who{display:none}.table td,.table th{padding:9px 8px}}