/* Shared styles for the signature page and the admin panel */
:root{
  --bg:#f3f5f9; --panel:#ffffff; --fg:#1b2433; --muted:#5d6b80; --line:#d8dee8; --soft:#eef2f8;
  --navy:#194172; --rose:#e1475f; --ok:#1f7a4d; --ok-bg:#e3f4ea; --warn:#8a5a00; --warn-bg:#fdf1d8; --info-bg:#e6eef9;
  --font:"Tajawal","Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#11161f; --panel:#1a212d; --fg:#e8edf5; --muted:#9aa7bb; --line:#2c3646; --soft:#222b39;
  --navy:#8fb3e6; --rose:#f07186; --ok:#5cc28e; --ok-bg:#16352a; --warn:#e7b85a; --warn-bg:#3a2e14; --info-bg:#1d2b40;
  color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.5}
.wrap{max-width:1100px;margin:0 auto;padding-inline:16px;padding-block:28px 48px;display:grid;gap:20px}
h1{margin:0;font-size:24px;color:var(--navy);text-wrap:balance}
h2{margin:0;font-size:15px;color:var(--navy)}
.top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start}
.top>div{min-width:0}
.top p{margin:4px 0 0;color:var(--muted);max-width:65ch}
.grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:760px){.grid{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:14px;min-width:0}
label{display:grid;gap:5px;font-size:13px;color:var(--muted);font-weight:700}
input,select{font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--fg);min-width:0}
input:focus,select:focus{outline:2px solid var(--rose);outline-offset:1px}
input[aria-invalid="true"]{border-color:var(--rose)}
.paper{background:#ffffff;border-radius:8px;padding:22px;overflow-x:auto;border:1px solid var(--line)}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
button,.btn{font:inherit;font-weight:700;border:0;border-radius:7px;padding:10px 16px;cursor:pointer;background:var(--rose);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
button:disabled{opacity:.6;cursor:default}
.ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.small{padding:6px 11px;font-size:13px}
.danger{background:transparent;color:var(--rose);border:1px solid var(--line)}
.status{font-weight:700;font-size:14px}
.status.ok{color:var(--ok)} .status.err{color:var(--rose)}
.steps{margin:0;padding-inline-start:20px;color:var(--muted);display:grid;gap:4px}
.steps b{color:var(--fg)}
.note{background:var(--info-bg);border-radius:8px;padding:10px 12px;font-size:14px}
.flash{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:10px 14px;font-weight:700}
.error{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:10px 14px;font-weight:700}

/* Admin */
.bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:var(--panel);border-bottom:1px solid var(--line);padding:12px 16px}
.bar .brand{font-weight:700;color:var(--navy);font-size:17px}
.bar nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bar nav a{color:var(--fg);text-decoration:none;padding:6px 10px;border-radius:6px;font-weight:700;font-size:14px}
.bar nav a[aria-current="page"]{background:var(--soft);color:var(--navy)}
.bar .who{color:var(--muted);font-size:13px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat b{display:block;font-size:26px;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{color:var(--muted);font-size:13px;font-weight:700}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.filters label{flex:1 1 220px}
.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th,table.data td{padding:10px 12px;text-align:start;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
table.data th{background:var(--soft);color:var(--muted);font-size:12px;letter-spacing:.02em}
table.data tr:last-child td{border-bottom:0}
table.data td.num{font-variant-numeric:tabular-nums}
table.data .ltr,.stat .ltr{direction:ltr;unicode-bidi:isolate}
.row-actions{display:flex;gap:6px}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}
.badge.create{background:var(--ok-bg);color:var(--ok)}
.badge.update{background:var(--warn-bg);color:var(--warn)}
.badge.copy{background:var(--info-bg);color:var(--navy)}
.empty{padding:28px;text-align:center;color:var(--muted)}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.pager a{color:var(--navy);font-weight:700}
dialog{border:1px solid var(--line);border-radius:12px;padding:0;background:var(--panel);color:var(--fg);max-width:min(720px,calc(100vw - 32px));width:100%}
dialog::backdrop{background:rgba(10,20,35,.45)}
dialog .inner{padding:18px;display:grid;gap:14px}
.center{min-height:100%;display:grid;place-items:center;padding-inline:16px;padding-block:40px}
.login{width:100%;max-width:380px}