/* Rawahel Imdad sign-in pages.
   Tokens and component values captured from rawahel.app (ui.css + glass.css).
   Replace this file with the RBOD stylesheets when they are added to the repo. */
:root{
  --gold:#BB9672;--gold-deep:#9C7B59;--gold-light:#D6BC9B;--gold-accent:#C9A16A;
  --gold-glass:rgba(187,150,114,.10);--gold-ring:rgba(187,150,114,.32);
  --gold-grad:linear-gradient(90deg,#8A6A43 0%,#C9A16A 55%,#EAD6AC 100%);
  --gold-text-grad:linear-gradient(110deg,#F3E9DA,#E8CF9E 55%,#C9A16A);
  --ink:#141516;--bg:#080604;
  --text-1:#F2F0EC;--text-2:#DAD7D2;--text-3:#A9A59E;--text-4:#96928B;
  --border:rgba(187,150,114,.16);--border-2:rgba(187,150,114,.30);
  --green:#8CB496;--green-bg:rgba(80,160,100,.14);
  --red:#D29A8F;--red-bg:rgba(200,90,70,.14);
  --amber:#CBAE7E;--amber-bg:rgba(200,150,70,.14);
  --blue:#8FB4E8;--blue-bg:rgba(90,130,200,.14);
  --glass-bg:rgba(26,20,13,.52);--glass-bg-2:rgba(34,27,18,.58);--glass-fill:rgba(255,240,215,.045);
  --glass-edge:rgba(255,236,206,.10);--glass-hi:rgba(255,244,228,.12);
  --glass-shadow:0 26px 50px -30px rgba(0,0,0,.85),0 2px 10px -4px rgba(0,0,0,.35);
  --r1:6px;--r2:10px;--r3:14px;--r4:20px;--sidebar-w:256px;--topbar-h:58px;
  --font:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text-2);font-size:14px;line-height:1.5;min-height:100dvh;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(201,161,106,.07),transparent 60%),radial-gradient(900px 500px at 0% 110%,rgba(201,161,106,.05),transparent 60%),var(--bg);background-attachment:fixed}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---------- shell ---------- */
.sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:var(--sidebar-w);z-index:40;display:flex;flex-direction:column;
  background:linear-gradient(168deg,rgba(255,244,228,.086),transparent 40%),rgba(16,12,8,.62);
  border-inline-end:1px solid var(--glass-edge);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);transition:transform .25s var(--ease)}
.brand{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--glass-edge)}
.brand-mark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-2);background:var(--gold-glass);color:var(--gold-light);font-weight:700;font-size:13px}
.brand-name{font-size:13px;font-weight:700;color:var(--gold-light);line-height:1.25}
.brand-sub{font-size:10.5px;color:var(--text-4)}
.nav{flex:1;overflow-y:auto;padding:10px 8px}
.nav-sec{font-size:10px;font-weight:600;color:var(--text-3);padding:14px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 13px;border-radius:12px;border:1px solid transparent;color:var(--text-3);font-size:12.5px;font-weight:600;min-height:40px}
.nav-item:hover{color:var(--text-1);background:var(--glass-fill)}
.nav-item.active{color:var(--text-1);background:linear-gradient(90deg,rgba(201,161,106,.22),rgba(201,161,106,.06));border-color:var(--border-2);box-shadow:inset 3px 0 0 var(--gold-accent)}
[dir=rtl] .nav-item.active{box-shadow:inset -3px 0 0 var(--gold-accent)}
.nav-item svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav-badge{margin-inline-start:auto;font-size:10px;font-weight:800;padding:1px 7px;border-radius:10px;background:var(--amber-bg);color:var(--amber)}
.user-block{border-top:1px solid var(--glass-edge);padding:12px 14px}
.user-row{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-2);color:var(--gold-light);font-weight:700;font-size:13px;flex:none}
.user-name{font-size:12.5px;font-weight:700;color:var(--text-1);line-height:1.2}
.user-role{font-size:10.5px;color:var(--text-4)}
.user-links{display:flex;gap:12px;margin-top:8px;font-size:11px;color:var(--text-3)}
.user-links button{background:none;border:0;color:inherit;font-size:inherit;cursor:pointer}
.user-links a:hover,.user-links button:hover{color:var(--gold-light)}

.main{margin-inline-start:var(--sidebar-w);min-height:100dvh}
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:8px 24px;
  background:linear-gradient(168deg,rgba(255,244,228,.086),transparent 40%),rgba(16,12,8,.55);border-bottom:1px solid var(--glass-edge);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.topbar-title{font-size:16px;font-weight:800;letter-spacing:-.01em;padding-inline-start:14px;border-inline-start:3px solid var(--gold-accent);
  background:var(--gold-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu-btn{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--glass-edge);background:var(--glass-fill);color:var(--text-2);cursor:pointer;place-items:center}
.menu-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.lang{margin-inline-start:auto;display:flex;padding:3px;border-radius:999px;border:1px solid var(--glass-edge);background:rgba(31,23,16,.66)}
.lang a{padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--text-3)}
.lang a.on{background:var(--gold-grad);color:#1B1309}
.content{padding:22px 24px 48px;max-width:1280px}
.lead{color:var(--text-3);font-size:13px;margin-bottom:16px;max-width:70ch}
.scrim{display:none}

/* ---------- surfaces ---------- */
.card{background:linear-gradient(168deg,rgba(255,244,228,.06),transparent 45%),var(--glass-bg);border:1px solid var(--border);border-radius:var(--r4);
  box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:18px 20px;margin-bottom:16px}
.card h2{font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:4px}
.card .hint{font-size:12.5px;color:var(--text-3);margin-bottom:14px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:16px}
.stat{position:relative;padding:16px 18px;border-radius:var(--r4);border:1px solid var(--border);background:var(--glass-bg);box-shadow:var(--glass-shadow),inset 3px 0 0 var(--gold-accent)}
[dir=rtl] .stat{box-shadow:var(--glass-shadow),inset -3px 0 0 var(--gold-accent)}
.stat-label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.stat-value{font-size:28px;font-weight:700;color:var(--gold-light);line-height:1.2;margin-top:4px}
.stat-sub{font-size:12px;color:var(--text-3)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{justify-content:space-between}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;min-height:39px;border-radius:999px;cursor:pointer;
  font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text-2);border:1px solid var(--glass-edge);
  background:linear-gradient(rgba(255,246,232,.10),transparent 60%),rgba(31,23,16,.66);box-shadow:inset 0 1px 0 var(--glass-hi);transition:filter .12s,transform .12s}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:translateY(1px)}
.btn-primary{color:#1B1309;border-color:rgba(255,228,186,.45);background:linear-gradient(rgba(255,255,255,.28),transparent 55%),var(--gold-grad);
  box-shadow:0 10px 22px -12px rgba(201,161,106,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-danger{color:var(--red);border-color:rgba(210,154,143,.35)}
.btn-sm{padding:5px 11px;min-height:30px;font-size:12px}
.btn-block{width:100%}

/* ---------- forms ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--text-3);margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{width:100%;font-family:inherit;font-size:14px;color:var(--text-1);
  padding:9px 12px;min-height:40px;border-radius:12px;border:1px solid var(--glass-edge);background:var(--glass-fill);box-shadow:inset 0 1px 2px rgba(0,0,0,.25);outline:none;
  transition:border-color .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{border-color:rgba(201,161,106,.65);box-shadow:0 0 0 3px rgba(201,161,106,.14)}
input::placeholder{color:var(--text-4)}
select{appearance:none;-webkit-appearance:none;padding-inline-end:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A9A59E' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
[dir=rtl] select{background-position:left 11px center}
select option{background:#1C150D;color:var(--text-1)}
.fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:16px}
.field .help{font-size:11.5px;color:var(--text-4);margin-top:4px}
.check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--glass-edge);background:var(--glass-fill)}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold-accent);flex:none}
.check b{display:block;font-size:13px;color:var(--text-1);font-weight:600}
.check span{font-size:11.5px;color:var(--text-3)}
@media (max-width:820px){input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{font-size:16px;min-height:44px}.btn{min-height:44px}}

/* ---------- tables ---------- */
.table-wrap{border-radius:var(--r3);border:1px solid var(--border);overflow-x:auto;background:var(--glass-bg);margin-bottom:16px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{position:sticky;top:0;text-align:start;padding:12px 11px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.85);white-space:nowrap;
  background:linear-gradient(#141516,#241A11)}
[dir=rtl] th{letter-spacing:0;font-size:11px}
td{padding:11px;border-top:1px solid rgba(255,236,206,.06);vertical-align:middle}
tbody tr:hover{background:rgba(255,240,215,.03)}
td.strong{color:var(--text-1);font-weight:700}
td.faint,.faint{color:var(--text-4)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.empty{padding:28px;text-align:center;color:var(--text-3)}

/* ---------- badges, chips, flashes ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--gold-glass);color:var(--gold-light);white-space:nowrap}
[dir=rtl] .badge{letter-spacing:0;font-size:11px}
.badge.green{background:var(--green-bg);color:var(--green)}.badge.red{background:var(--red-bg);color:var(--red)}
.badge.amber{background:var(--amber-bg);color:var(--amber)}.badge.blue{background:var(--blue-bg);color:var(--blue)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:18px;font-size:12px;font-weight:700;color:var(--text-2);border:1px solid var(--glass-edge);background:rgba(31,23,16,.66)}
.chip.on{background:var(--gold-glass);color:var(--gold-light);border-color:var(--gold-ring)}
.chip small{font-weight:600;color:var(--text-4)}
.flash{padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:12px;border:1px solid var(--glass-edge);background:var(--glass-fill)}
.flash.error{background:var(--red-bg);color:var(--red);border-color:rgba(210,154,143,.3)}
.flash.success{background:var(--green-bg);color:var(--green);border-color:rgba(140,180,150,.3)}
.flash.info{background:var(--amber-bg);color:var(--amber);border-color:rgba(203,174,126,.3)}

/* ---------- signature ---------- */
.sig-pad{position:relative;border-radius:var(--r3);border:1px solid var(--border-2);background:#F7F3EC;overflow:hidden;touch-action:none;max-width:520px}
.sig-pad canvas{display:block;width:100%;height:190px;cursor:crosshair}
.sig-pad .sig-line{position:absolute;inset-inline:24px;bottom:42px;border-bottom:1px dashed #B9AE9C;pointer-events:none}
.sig-current{background:#F7F3EC;border-radius:var(--r2);padding:8px;max-width:280px;border:1px solid var(--border-2)}
.sig-current img{display:block;width:100%;height:auto}

/* ---------- auth pages ---------- */
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.auth-card{position:relative;width:100%;max-width:420px;padding:36px 34px 30px;border-radius:22px;background:rgba(22,16,10,.78);border:1px solid rgba(201,161,106,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px rgba(201,161,106,.06),0 0 60px rgba(201,161,106,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.auth-card.wide{max-width:560px}
.auth-card::before,.auth-card::after{content:"";position:absolute;width:16px;height:16px;border:1.5px solid rgba(255,255,255,.75)}
.auth-card::before{top:10px;inset-inline-start:10px;border-inline-end:0;border-bottom:0}
.auth-card::after{bottom:10px;inset-inline-end:10px;border-inline-start:0;border-top:0}
.auth-head{text-align:center;margin-bottom:22px}
.kick{font-size:10.5px;letter-spacing:.34em;font-weight:500;text-transform:uppercase;color:var(--gold-accent)}
.auth-title{font-size:26px;font-weight:700;letter-spacing:.14em;margin:8px 0 4px;background:linear-gradient(120deg,#E8CF9E,#C9A16A 60%,#A67E4E);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-sub{font-size:11px;letter-spacing:.26em;font-weight:500;text-transform:uppercase;color:var(--gold-deep)}
.auth-co{font-size:12px;color:var(--text-4);margin-top:4px}
[dir=rtl] .kick,[dir=rtl] .auth-sub,[dir=rtl] .auth-title{letter-spacing:0}
.auth-card label{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
[dir=rtl] .auth-card label{letter-spacing:0;font-size:12.5px}
.auth-card .field{margin-bottom:14px}
.auth-card input,.auth-card select{border-radius:13px;background:rgba(14,10,6,.6);border-color:rgba(201,161,106,.22);padding:12px 14px;font-size:16px;min-height:46px}
.btn-submit{width:100%;padding:14px;border-radius:14px;border:0;cursor:pointer;font-size:14.5px;font-weight:800;color:#17110A;background:linear-gradient(135deg,#E8CF9E,#C9A16A);box-shadow:0 6px 22px rgba(201,161,106,.3);margin-top:6px}
.auth-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;font-size:12.5px;color:var(--text-3)}
.auth-foot a:hover{color:var(--gold-light)}
.auth-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .sidebar{transform:translateX(-100%)}
  [dir=rtl] .sidebar{transform:translateX(100%)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.55)}
  .main{margin-inline-start:0}
  .menu-btn{display:grid}
  .topbar{padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top,0px));height:calc(var(--topbar-h) + env(safe-area-inset-top,0px))}
  .content{padding:16px 14px calc(40px + env(safe-area-inset-bottom,0px))}
  .auth-card{padding:28px 20px 24px}
  .auth-two{grid-template-columns:1fr}
}