/* ===== نظام شكاوى الموظفين - إرادة | RTL ===== */
:root{
  --green:#0a7d4f; --green-d:#075e3b; --green-l:#e7f5ee;
  --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f4f6f8;
  --amber:#b45309; --red:#b91c1c; --blue:#1d4ed8;
  --radius:14px; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;font-size:15px;
}
a{color:var(--green-d);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted);font-size:.9em}

/* ===== الشريط العلوي ===== */
.topbar{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;box-shadow:var(--shadow)}
.topbar-inner{max-width:1200px;margin:auto;display:flex;align-items:center;gap:18px;padding:10px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand:hover{text-decoration:none}
.brand-logo{background:#fff;color:var(--green-d);font-weight:800;border-radius:10px;padding:4px 12px}
.brand-text{font-weight:700}
.mainnav{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.mainnav a{color:#eafaf2;padding:7px 12px;border-radius:9px;font-size:.93em}
.mainnav a:hover{background:rgba(255,255,255,.15);text-decoration:none}
.userbox{display:flex;align-items:center;gap:10px;font-size:.88em}
.uname{font-weight:700}
.urole{background:rgba(255,255,255,.18);padding:2px 9px;border-radius:20px;font-size:.85em}
.logout{background:#fff;color:var(--green-d);padding:5px 12px;border-radius:9px;font-weight:700}
.logout:hover{text-decoration:none;opacity:.9}

/* ===== الحاوية ===== */
.container{max-width:1200px;margin:22px auto;padding:0 18px}
.footer{text-align:center;color:var(--muted);padding:26px;font-size:.85em;border-top:1px solid var(--line);margin-top:30px}

/* ===== البطاقات ===== */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.card h2,.card h3{margin-top:0}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-title h1{font-size:1.45em;margin:0}

/* ===== الشبكة ===== */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:800px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ===== مربعات الإحصاء ===== */
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .num{font-size:2em;font-weight:800;color:var(--green-d)}
.stat .lbl{color:var(--muted);font-size:.9em}
.stat.warn .num{color:var(--amber)} .stat.red .num{color:var(--red)} .stat.blue .num{color:var(--blue)}

/* ===== النماذج ===== */
label{display:block;font-weight:600;margin:12px 0 5px}
input[type=text],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],
input[type=password],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink)
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-l)}
textarea{min-height:110px;resize:vertical}
.hint{color:var(--muted);font-size:.85em;margin-top:4px}
.req:after{content:" *";color:var(--red)}

/* ===== الأزرار ===== */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;border:none;
  padding:11px 20px;border-radius:10px;font:inherit;font-weight:700;cursor:pointer;transition:.15s}
.btn:hover{background:var(--green-d);text-decoration:none}
.btn.block{width:100%;justify-content:center}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.secondary:hover{background:#f3f4f6}
.btn.danger{background:var(--red)} .btn.warn{background:var(--amber)}
.btn.sm{padding:6px 13px;font-size:.88em}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ===== التنبيهات ===== */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;border:1px solid}
.alert.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.alert.err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.alert.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}

/* ===== الشارات ===== */
.badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:.82em;font-weight:700}
.badge.gray{background:#f3f4f6;color:#374151}
.badge.blue{background:#dbeafe;color:#1e40af}
.badge.teal{background:#ccfbf1;color:#0f766e}
.badge.red{background:#fee2e2;color:#991b1b}
.badge.amber{background:#fef3c7;color:#92400e}
.badge.indigo{background:#e0e7ff;color:#3730a3}
.badge.orange{background:#ffedd5;color:#9a3412}
.badge.purple{background:#f3e8ff;color:#6b21a8}
.badge.green{background:#d1fae5;color:#065f46}

/* ===== الجداول ===== */
.table-wrap{overflow-x:auto;border-radius:var(--radius)}
table.data{width:100%;border-collapse:collapse;background:#fff;font-size:.92em}
table.data th,table.data td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.data th{background:#f9fafb;font-weight:700;color:#374151;position:sticky;top:0}
table.data tr:hover td{background:#fafdfb}
table.data td.wrap{white-space:normal;min-width:240px}

/* ===== سجل الخطوات (Timeline) ===== */
.timeline{list-style:none;padding:0;margin:0;border-inline-start:2px solid var(--line);padding-inline-start:18px}
.timeline li{position:relative;padding-bottom:18px}
.timeline li:before{content:"";position:absolute;inline-size:11px;block-size:11px;background:var(--green);
  border-radius:50%;inset-inline-start:-25px;top:5px;border:2px solid #fff;box-shadow:0 0 0 2px var(--green)}
.timeline .t-time{color:var(--muted);font-size:.82em}
.timeline .t-actor{font-weight:700}

/* ===== صفحة الدخول ===== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--green),var(--green-d));padding:18px}
.auth-card{background:#fff;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.2);padding:34px;width:100%;max-width:420px}
.auth-logo{text-align:center;margin-bottom:6px}
.auth-logo .lg{display:inline-block;background:var(--green);color:#fff;font-weight:800;font-size:1.4em;border-radius:14px;padding:10px 22px}
.auth-card h1{text-align:center;font-size:1.25em;margin:14px 0 4px}
.auth-card .sub{text-align:center;color:var(--muted);margin-bottom:20px;font-size:.92em}
.otp-input{letter-spacing:.5em;text-align:center;font-size:1.5em;font-weight:700}

/* ===== متفرقات ===== */
.kv{display:grid;grid-template-columns:190px 1fr;gap:8px 14px}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0}
@media(max-width:600px){.kv{grid-template-columns:1fr}.kv dt{margin-top:8px}}
.divider{height:1px;background:var(--line);margin:18px 0}
.sla-ok{color:#065f46;font-weight:700} .sla-soon{color:var(--amber);font-weight:700} .sla-overdue{color:var(--red);font-weight:800}
.section-title{font-weight:800;color:var(--green-d);margin:22px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--green-l)}
.empty{text-align:center;color:var(--muted);padding:40px}
.pill{display:inline-block;background:var(--green-l);color:var(--green-d);padding:2px 10px;border-radius:20px;font-size:.82em;font-weight:700}
.tag-file{display:inline-flex;gap:6px;align-items:center;background:#f3f4f6;padding:5px 11px;border-radius:8px;margin:3px;font-size:.85em}