/* نمط مشترك لصفحات النظام الجديدة (دخول/موظف/مستخدمون) — نفس ألوان أداة الفواتير الأساسية */
:root{
  --ink:#141414;
  --red:#c8102e;
  --red-dim:#a30e26;
  --paper:#faf9f6;
  --panel:#ffffff;
  --panel-2:#f3f1ec;
  --line:#e4e1da;
  --line-strong:#d3cfc4;
  --text:#1c1b19;
  --text-dim:#6b665e;
  --muted:#948e83;
  --success:#1c7c4c;
  --success-bg:#e7f5ee;
  --danger:#c8102e;
  --danger-bg:#fdeceb;
  --amber:#92400e;
  --amber-bg:#fef3e2;
  --shadow:0 1px 2px rgba(20,20,20,.06),0 10px 28px -14px rgba(20,20,20,.22);
  --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans Arabic',Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);color:var(--text);font-family:var(--font);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font);text-wrap:balance;margin:0;}
button,input,select,textarea{font-family:inherit;font-size:14px;}
a{color:var(--red);}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;background:var(--ink);color:#fff;
}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;}
.topbar .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--red);}
.topbar .who{display:flex;align-items:center;gap:10px;font-size:13px;color:#eee;}
.topbar .who b{color:#fff;}
.topbar a.btn, .topbar button.btn{
  background:var(--red);color:#fff;border:none;border-radius:8px;padding:7px 12px;
  font-weight:700;font-size:12.5px;cursor:pointer;text-decoration:none;
}
.topbar a.btn.ghost, .topbar button.btn.ghost{background:rgba(255,255,255,.12);}

.wrap{max-width:520px;margin:0 auto;padding:24px 16px 60px;}
.wrap.wide{max-width:920px;}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:16px;
}
.card h2{font-size:16px;margin-bottom:14px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:5px;font-weight:600;}
.field input[type=text],.field input[type=password],.field input[type=number],.field select{
  width:100%;padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:9px;
  background:var(--panel);color:var(--text);font-size:14.5px;
}
.field input:focus,.field select:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red);}
.checkbox-row{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13.5px;color:var(--text-dim);}
.checkbox-row input{width:16px;height:16px;}

.btn-primary{
  width:100%;padding:12px;background:var(--red);color:#fff;border:none;border-radius:9px;
  font-weight:800;font-size:15px;cursor:pointer;
}
.btn-primary:disabled{opacity:.6;}
.btn-primary:hover{background:var(--red-dim);}
.btn-secondary{
  padding:9px 14px;background:var(--panel-2);color:var(--text);border:1.5px solid var(--line-strong);
  border-radius:9px;font-weight:700;font-size:13px;cursor:pointer;
}

.error-box{background:var(--danger-bg);color:var(--danger);border:1px solid #f3c7c3;border-radius:9px;padding:10px 12px;margin-bottom:14px;font-size:13.5px;font-weight:600;}
.success-box{background:var(--success-bg);color:var(--success);border:1px solid #bfe3cf;border-radius:9px;padding:10px 12px;margin-bottom:14px;font-size:13.5px;font-weight:600;}
.hint{font-size:12px;color:var(--muted);margin-top:6px;}

.login-logo{text-align:center;margin-bottom:22px;}
.login-logo .mark{
  display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;
  background:var(--ink);color:#fff;font-weight:900;font-size:18px;margin-bottom:10px;
}
.login-logo h1{font-size:19px;letter-spacing:.3px;}
.login-logo p{font-size:12.5px;color:var(--muted);margin-top:4px;}

.list-row{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;background:var(--panel);
}
.list-row .meta{flex:1;min-width:0;}
.list-row .meta .t1{font-weight:700;font-size:14px;}
.list-row .meta .t2{font-size:12px;color:var(--muted);margin-top:2px;}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:800;}
.badge.sent{background:var(--amber-bg);color:var(--amber);}
.badge.submitted{background:#e0ecfd;color:#1d4ed8;}
.badge.approved{background:var(--success-bg);color:var(--success);}
.badge.admin{background:var(--danger-bg);color:var(--danger);}
.badge.user{background:var(--panel-2);color:var(--text-dim);}

.empty-note{text-align:center;color:var(--muted);padding:30px 10px;font-size:13.5px;}

table.plain{width:100%;border-collapse:collapse;font-size:13px;}
table.plain th{background:var(--panel-2);color:var(--text-dim);font-weight:700;padding:9px 8px;text-align:right;border-bottom:2px solid var(--line-strong);}
table.plain td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle;}
table.plain img{width:44px;height:44px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid var(--line);}
table.plain input[type=number]{width:90px;padding:6px 8px;border:1.5px solid var(--line-strong);border-radius:7px;}

.modal-backdrop{position:fixed;inset:0;background:rgba(20,20,20,.5);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;}
.modal-box{background:var(--panel);border-radius:var(--radius);padding:20px;max-width:420px;width:100%;box-shadow:var(--shadow);max-height:85vh;overflow:auto;}
.modal-box h3{font-size:15px;margin-bottom:12px;}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:20px;font-size:13px;box-shadow:var(--shadow);z-index:300;}