:root{
  --purple: #6366f1;
  --purple-dark: #4338ca;
  --purple-deep: #312e81;
  --green: #10b981;
  --green-bg: #ecfdf5;
  --amber: #d97706;
  --amber-bg: #fffbeb;
  --red: #ef4444;
  --red-bg: #fef2f2;
  --blue: #2563eb;
  --blue-bg: #eff6ff;
  --gray: #64748b;
  --bg: #f6f5fb;
  --card: #ffffff;
  --text: #1e1b2e;
  --border: #e6e3f1;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{ font-family:'Tajawal','Cairo',Arial,sans-serif; background:var(--bg); color:var(--text); direction:rtl; }

/* ===================== Login ===================== */
.login-body{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--purple-deep), var(--purple) 55%, var(--purple-dark)); padding:20px; }
.login-card{ background:#fff; border-radius:20px; padding:32px 28px; width:100%; max-width:380px; box-shadow:0 20px 50px rgba(0,0,0,0.25); }
.login-logo{ text-align:center; margin-bottom:20px; }
.login-logo h1{ font-size:20px; margin:8px 0 2px; color:var(--purple-dark); }
.login-logo p{ font-size:12.5px; color:var(--gray); margin:0; }
.login-error{ background:var(--red-bg); color:var(--red); border:1px solid #f3caca; border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:14px; text-align:center; }
.login-form label{ display:block; font-size:13px; font-weight:700; margin:12px 0 6px; color:var(--text); }
.login-form input{ width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:10px; font-size:14px; font-family:inherit; outline:none; }
.login-form input:focus{ border-color:var(--purple); }
.login-form button{ width:100%; margin-top:20px; background:var(--purple); color:#fff; border:none; border-radius:12px; padding:13px; font-size:15px; font-weight:800; cursor:pointer; }

/* ===================== Layout ===================== */
.admin-body{ padding-bottom:40px; }
.admin-header{ background:linear-gradient(135deg, var(--purple-deep), var(--purple-dark)); color:#fff; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; box-shadow:0 4px 14px rgba(49,46,129,0.25); }
.admin-brand{ font-weight:800; font-size:16px; }
.admin-nav{ display:flex; gap:6px; flex-wrap:wrap; }
.admin-nav a{ color:#fff; text-decoration:none; font-size:13px; font-weight:700; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,0.12); }
.admin-nav a.active{ background:#fff; color:var(--purple-dark); }
.admin-user{ display:flex; align-items:center; gap:10px; font-size:13px; }
.logout-link{ color:#fff; background:rgba(255,255,255,0.15); padding:6px 12px; border-radius:8px; text-decoration:none; font-weight:700; }

.admin-wrap{ max-width:1280px; margin:24px auto; padding:0 18px; }
.admin-header-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.admin-header-row h2{ margin:0; font-size:19px; color:var(--purple-dark); }

.btn-primary{ background:var(--purple); color:#fff; border:none; border-radius:10px; padding:10px 18px; font-weight:800; font-size:13.5px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn-secondary{ background:#fff; color:var(--purple-dark); border:1px solid var(--border); border-radius:10px; padding:10px 18px; font-weight:800; font-size:13.5px; cursor:pointer; text-decoration:none; display:inline-block; }

/* ===================== KPI cards ===================== */
.kpi-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px; }
@media (min-width:768px){ .kpi-row{ grid-template-columns:repeat(4,1fr); } }
.kpi-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; }
.kpi-num{ font-size:26px; font-weight:900; color:var(--purple-dark); }
.kpi-label{ font-size:12.5px; color:var(--gray); font-weight:700; margin-top:4px; }
.kpi-card.kpi-green{ border-inline-start:4px solid var(--green); } .kpi-card.kpi-green .kpi-num{ color:var(--green); }
.kpi-card.kpi-blue{ border-inline-start:4px solid var(--blue); } .kpi-card.kpi-blue .kpi-num{ color:var(--blue); }
.kpi-card.kpi-amber{ border-inline-start:4px solid var(--amber); } .kpi-card.kpi-amber .kpi-num{ color:var(--amber); }

/* ===================== Filters ===================== */
.filters-row{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.filters-row select, .filters-row input[type="date"], .filters-row input[type="text"]{
  padding:9px 12px; border:1px solid var(--border); border-radius:10px; font-family:inherit; font-size:13px; background:#fff; color:var(--text); }
.clear-link{ font-size:12.5px; color:var(--gray); text-decoration:none; font-weight:700; }

/* ===================== Table ===================== */
.table-wrap{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:auto; margin-bottom:24px; }
.admin-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.admin-table th{ background:#faf9fd; color:var(--purple-dark); text-align:right; padding:12px 14px; font-size:12.5px; border-bottom:1px solid var(--border); white-space:nowrap; }
.admin-table td{ padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr.row-highlight{ background:var(--blue-bg); }
.empty-row{ text-align:center; color:var(--gray); padding:30px !important; }

.pill{ font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; white-space:nowrap; display:inline-block; }
.pill-purple{ background:#ede9fe; color:var(--purple-dark); }
.pill-blue{ background:var(--blue-bg); color:var(--blue); }
.pill-amber{ background:var(--amber-bg); color:var(--amber); }
.pill-green{ background:var(--green); color:#fff; }
.pill-red{ background:var(--red); color:#fff; }
.pill-gray{ background:#f1f0f6; color:var(--gray); }

.status-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end:4px; }
.status-dot.active{ background:var(--green); }
.status-dot.inactive{ background:var(--gray); }

.actions-cell{ white-space:nowrap; }
.link-btn{ background:none; border:none; color:var(--purple-dark); font-weight:700; font-size:12.5px; cursor:pointer; text-decoration:none; margin-inline-end:8px; font-family:inherit; padding:0; }
.link-btn.danger{ color:var(--red); }

.short-url-box{ display:flex; align-items:center; gap:6px; direction:ltr; font-size:12.5px; }
.short-url-box code{ background:#f4f2fb; padding:4px 8px; border-radius:6px; color:var(--purple-dark); font-weight:700; }
.copy-btn{ background:none; border:1px solid var(--border); border-radius:6px; padding:3px 8px; font-size:11px; cursor:pointer; color:var(--gray); }

/* ===================== Modal ===================== */
.modal-overlay{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(30,27,46,0.55); z-index:999; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.active, .modal-overlay[style*="flex"]{ display:flex; }
.modal-box{ background:#fff; border-radius:18px; max-width:480px; width:100%; padding:20px; position:relative; max-height:90vh; overflow:auto; }
.modal-box.wide{ max-width:640px; }
.modal-box h3{ margin-top:0; color:var(--purple-dark); }
.modal-box label{ display:block; font-size:13px; font-weight:700; margin:12px 0 6px; }
.modal-box input[type=text], .modal-box input[type=url], .modal-box input[type=password], .modal-box select, .modal-box textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-family:inherit; font-size:13.5px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.cancel-btn{ background:#f1f0f6; border:none; padding:10px 18px; border-radius:10px; font-weight:700; cursor:pointer; }
.save-btn{ background:var(--purple); color:#fff; border:none; padding:10px 18px; border-radius:10px; font-weight:800; cursor:pointer; }
.modal-close{ position:absolute; top:14px; left:14px; border:none; background:#f1f0f6; width:30px; height:30px; border-radius:50%; cursor:pointer; font-weight:900; }

.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin:8px 0; }
.perm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; background:#faf9fd; border:1px solid var(--border); border-radius:10px; padding:12px; margin-top:6px; }

/* ===================== Charts / stat sections ===================== */
.section-title{ font-size:15.5px; font-weight:800; color:var(--purple-dark); margin:26px 0 10px; }
.charts-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:20px; }
@media (min-width:900px){ .charts-grid{ grid-template-columns:2fr 1fr; } }
.chart-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; }
.chart-card h4{ margin:0 0 12px; font-size:13.5px; color:var(--purple-dark); }

.qr-preview{ text-align:center; padding:16px; }
.qr-preview img{ border:1px solid var(--border); border-radius:12px; padding:8px; background:#fff; }

@media print{ .admin-header, .filters-row, .admin-nav, .report-toolbar{ display:none !important; } }