:root {
  --bg: #0a0b0e;
  --panel: #12141b;
  --panel-2: #171a23;
  --panel-hover: #1c2029;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --text: #e9eaf0;
  --muted: #8b8fa3;
  --accent: #5865F2;
  --accent-soft: rgba(88, 101, 242, 0.14);
  --accent-hover: #6b77ff;
  --danger: #f04747;
  --danger-soft: rgba(240, 71, 71, 0.12);
  --success: #3ddc84;
  --success-soft: rgba(61, 220, 132, 0.12);
  --warning: #f0b232;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { scrollbar-color: #2c3040 var(--bg); scrollbar-width: thin; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(1200px 500px at 80% -10%, rgba(88, 101, 242, 0.07), transparent 60%);
  color: var(--text);
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
}

/* ---------- سكرول مخصص (لكل الصفحة والقوائم الداخلية) ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2c3040;
  border-radius: 10px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #3a3f52; }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: #2c3040 transparent; }

.layout { display: flex; min-height: 100vh; }

/* ---------- الشريط الجانبي ---------- */
.sidebar {
  width: 250px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  padding: 20px 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  font-weight: 800;
  font-size: 17px;
  padding: 4px 20px 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

.nav-group { margin-bottom: 16px; padding: 0 12px; }

/* عنوان المجموعة = زر طيّ. بيضل شكله عنوان صغير باهت، بس صار قابل للضغط
   وفيه سهم على الطرف. (كان <span> فصار <button> - لهيك منصفّر ستايل الزر) */
.nav-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: start;
  transition: color 0.15s ease;
}
.nav-title:hover { background: none; box-shadow: none; color: var(--text); }
.nav-title:active { transform: none; }

/* السهم: بيشاور تحت لما المجموعة مفتوحة، وعالجنب لما تنطوي */
.nav-title .nav-arrow {
  display: inline-flex;
  transition: transform 0.2s ease;
  transform: rotate(90deg);
  opacity: 0.7;
}
.nav-title .nav-arrow svg { width: 12px; height: 12px; margin: 0; }
.nav-group.closed .nav-title .nav-arrow { transform: rotate(0deg); }
.nav-group.closed .nav-items { display: none; }

.nav-group a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 2px;
  transition: background 0.18s ease, color 0.18s ease;
}

/* أيقونة العنصر بالقائمة + الشارة بتنزاح لآخر السطر */
.nav-group a > [data-icon] { display: inline-flex; flex-shrink: 0; opacity: 0.85; }
.nav-group a > [data-icon] svg { width: 16px; height: 16px; margin: 0; }
.nav-group a.active > [data-icon] { opacity: 1; }
.nav-group a .soon { margin-inline-start: auto; }

.nav-group a:hover { background: var(--panel-hover); color: var(--text); }
.nav-group a.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.35);
}

.soon {
  font-size: 9.5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}

.nav-group a.active .soon { background: rgba(255,255,255,0.2); color: #fff; border-color: transparent; }

/* ---------- المحتوى ---------- */
.content-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 20, 27, 0.6);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar h1 { font-size: 17px; font-weight: 800; margin: 0; }

.user-box { display: flex; align-items: center; gap: 12px; }
.user-box .badge {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border: 1px solid rgba(88, 101, 242, 0.35);
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;
}
.user-box .username { color: var(--muted); font-size: 13px; }
.user-box .logout-link { color: var(--danger); text-decoration: none; font-size: 13px; font-weight: 600; }
.user-box .logout-link:hover { text-decoration: underline; }

.page-content { padding: 24px 28px; }

/* ---------- عناصر عامة ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.card h2 {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: transform 0.18s ease, border-color 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stat-box:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.stat-box .value { font-size: 28px; font-weight: 800; }
.stat-box .label { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.stat-box .stat-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.stat-box .stat-icon svg { width: 24px; height: 24px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 700; font-size: 11.5px; letter-spacing: 0.5px; text-transform: uppercase; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
tr.clickable-row { cursor: pointer; }

input, textarea, select {
  width: 100%; padding: 10px 13px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--text); margin-bottom: 10px; font-family: inherit; font-size: 13.5px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.18);
}
input::placeholder { color: #565b6e; }

button, .btn {
  background: var(--accent); color: #fff; border: none; padding: 9px 18px;
  border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13px; font-family: inherit;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
button:hover, .btn:hover { background: var(--accent-hover); box-shadow: 0 4px 14px rgba(88, 101, 242, 0.3); }
button:active, .btn:active { transform: scale(0.98); }
button.danger { background: var(--danger); }
button.danger:hover { background: #ff5c5c; box-shadow: 0 4px 14px rgba(240, 71, 71, 0.3); }
button.ghost, .btn.ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--text); box-shadow: none; }
button.ghost:hover, .btn.ghost:hover { background: var(--panel-hover); border-color: var(--accent); box-shadow: none; }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
}
.tag.online { color: var(--success); border-color: rgba(61, 220, 132, 0.4); background: var(--success-soft); }

.empty-state { color: var(--muted); text-align: center; padding: 40px 0; font-size: 14px; }

.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 8px; margin-bottom: 16px; }
.permission-grid label { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--bg); border: 1px solid var(--border); padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: border-color 0.15s ease; }
.permission-grid label:hover { border-color: var(--accent); }
.permission-grid input { width: auto; margin: 0; }

/* ---------- نقطة الاتصال الخضراء النابضة ---------- */
.online-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55);
  animation: pulse-green 1.8s infinite;
  flex-shrink: 0;
}
.offline-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #565b6e;
  flex-shrink: 0;
}
@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

/* ---------- قائمة اللاعبين المتصلين ---------- */
.players-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.players-toolbar .search-wrap { flex: 1; min-width: 220px; position: relative; }
.players-toolbar .search-wrap input { margin: 0; padding-right: 38px; }
.players-toolbar .search-wrap svg {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.online-count-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--success-soft); border: 1px solid rgba(61, 220, 132, 0.35);
  color: var(--success); font-weight: 700; font-size: 13px;
  padding: 8px 16px; border-radius: 24px;
}

.players-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

.player-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}
.player-card:hover {
  transform: translateY(-2px);
  border-color: rgba(61, 220, 132, 0.35);
  box-shadow: var(--shadow);
}
.player-card .avatar {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); flex-shrink: 0;
  position: relative;
}
.player-card .avatar svg { width: 22px; height: 22px; }
.player-card .avatar .online-dot {
  position: absolute; bottom: -3px; left: -3px;
  border: 2px solid var(--panel);
  width: 12px; height: 12px;
}
.player-card .p-info { flex: 1; min-width: 0; }
.player-card .p-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-card .p-sub { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-card .p-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.player-card .sid { font-size: 11px; color: var(--muted); font-weight: 600; }
.ping-badge {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 12px;
  background: var(--success-soft); color: var(--success); border: 1px solid rgba(61, 220, 132, 0.3);
}
.ping-badge.mid { background: rgba(240, 178, 50, 0.12); color: var(--warning); border-color: rgba(240, 178, 50, 0.3); }
.ping-badge.bad { background: var(--danger-soft); color: var(--danger); border-color: rgba(240, 71, 71, 0.3); }
.player-card .kick-btn {
  padding: 6px 10px; font-size: 11px;
  opacity: 0; transition: opacity 0.15s ease;
}
.player-card:hover .kick-btn { opacity: 1; }

.job-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-hover); border: 1px solid rgba(88, 101, 242, 0.25);
}
.gang-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  background: var(--danger-soft); color: #ff8a8a; border: 1px solid rgba(240, 71, 71, 0.25);
}

/* ---------- نافذة تفاصيل الشخصية ---------- */
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.detail-header-left { display: flex; gap: 10px; }
.avatar-circle { width: 46px; height: 46px; border-radius: 50%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.detail-name { font-size: 16px; font-weight: 700; }
.status-line { font-size: 12.5px; margin-top: 4px; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.status-line.online { color: var(--success); }
.status-line.offline { color: var(--muted); }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 13px; margin-bottom: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.info-grid .info-item .label { color: var(--muted); font-size: 11px; display: block; margin-bottom: 2px; font-weight: 600; }
.info-grid .info-item .value { word-break: break-all; font-weight: 600; }

.money-row { display: flex; gap: 10px; margin-bottom: 16px; }
/* min-width:0 ضروري: بدونه لا ينكمش عنصر flex ويكسر التخطيط عند المبالغ الضخمة */
.money-box { flex: 1; min-width: 0; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; transition: border-color 0.15s ease; }
.money-box:hover { border-color: rgba(61, 220, 132, 0.3); }
.money-box .amount {
  font-size: 19px; font-weight: 800; color: var(--success);
  /* حماية من أي قيمة طويلة مهما بلغت - تُقصّ بثلاث نقاط بدل كسر الصفحة */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: ltr; unicode-bidi: plaintext;
}
.money-box .label { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 600; }

.icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 6px; }
.icon-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 4px; cursor: pointer; font-size: 10.5px; font-weight: 600; color: var(--text);
  text-align: center; line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.icon-btn:hover { background: var(--panel-hover); border-color: var(--accent); transform: translateY(-1px); }
.icon-btn.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.icon-btn.disabled { opacity: .3; cursor: not-allowed; }
.icon-btn.disabled:hover { background: var(--bg); border-color: var(--border); transform: none; }
.icon-btn .icon { font-size: 18px; color: var(--accent-hover); }
.icon-btn.selected .icon { color: #fff; }

.action-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-top: 10px; }
.action-panel h4 { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.action-panel .row, .modal-box-body .row { display: flex; gap: 8px; }
.action-panel .row input, .action-panel .row select,
.modal-box-body .row input, .modal-box-body .row select { margin: 0; }

/* ---------- أيقونات SVG ---------- */
.icon-btn svg { width: 20px; height: 20px; }
.avatar-circle svg { width: 24px; height: 24px; color: var(--muted); }
.info-item .value svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; }

/* ---------- صفحة الشخصية الكاملة ---------- */
.char-page-header {
  display: flex; align-items: center; gap: 18px; margin-bottom: 22px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  flex-wrap: wrap;
}
.avatar-large {
  width: 84px; height: 84px; border-radius: 16px; background: var(--bg);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.avatar-large svg { width: 40px; height: 40px; color: var(--muted); }
.char-page-title { font-size: 21px; font-weight: 800; }
.char-page-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }

.char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.char-grid .cd-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 900px) { .char-grid { grid-template-columns: 1fr; } }

.section-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 14px; letter-spacing: 0.6px; text-transform: uppercase; }
.section-title svg { width: 16px; height: 16px; }

/* ---------- شبكة الإنفنتوري (بطاقات بصور كبيرة) ---------- */
.inv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 440px;
  overflow-y: auto;
  padding: 2px;
}
.inv-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 6px 8px;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.inv-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.inv-item .inv-icon {
  width: 52px; height: 52px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); overflow: hidden;
}
.inv-item .inv-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
.inv-item .inv-icon svg { width: 24px; height: 24px; }
.inv-item .inv-name { font-size: 10.5px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.inv-item .inv-qty {
  position: absolute; top: 5px; left: 5px;
  font-size: 10px; font-weight: 700; color: var(--text);
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--border-strong);
  padding: 1px 6px; border-radius: 8px;
}
.inv-item .inv-remove {
  position: absolute; top: 5px; right: 5px;
  padding: 3px 5px !important; font-size: 9px !important;
  opacity: 0; transition: opacity 0.15s ease;
  line-height: 1;
}
.inv-item:hover .inv-remove { opacity: 1; }
.inv-item .inv-remove svg { width: 11px; height: 11px; }

/* ---------- نافذة الإجراء المنبثقة (بمنتصف الشاشة) ---------- */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(5, 6, 9, 0.72);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-overlay.open { display: flex; animation: fade-in 0.18s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 16px;
  width: 390px; max-width: 100%; max-height: 85vh; overflow-y: auto;
  box-shadow: var(--shadow);
  animation: slide-up 0.2s ease;
}
@keyframes slide-up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-box-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.modal-box-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.modal-box-close { cursor: pointer; color: var(--muted); background: none; border: none; font-size: 18px; padding: 4px; line-height: 1; box-shadow: none; }
.modal-box-close:hover { color: var(--text); background: none; box-shadow: none; }
.modal-box-body { padding: 18px; }

/* ---------- قائمة اختيار مخصصة (بديل عن native datalist) ---------- */
.custom-select-wrap { position: relative; }
.custom-select-list {
  /* بدل ما تكون منسدلة فوق المحتوى (وتنقص بحجم النافذة)، صارت تتدفق داخل النافذة
     فالنافذة بتكبر وبيبين خيارات أكثر */
  position: static; margin-top: 8px; right: 0; left: 0;
  background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 12px;
  max-height: 55vh; overflow-y: auto; display: none;
  box-shadow: var(--shadow);
  padding: 6px;
}
.custom-select-list.open { display: block; }
.custom-select-option {
  padding: 9px 12px; cursor: pointer; font-size: 13.5px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 9px; transition: background 0.12s ease;
}
.custom-select-option:hover { background: var(--accent-soft); }
.custom-select-option .opt-img {
  width: 40px; height: 40px; object-fit: contain; flex-shrink: 0;
  background: var(--bg); border-radius: 8px; padding: 3px;
}
.custom-select-option .opt-label { color: var(--text); font-weight: 700; flex: 1; }
.custom-select-option .opt-sub { color: var(--muted); font-size: 11.5px; direction: ltr; background: var(--bg); padding: 2px 8px; border-radius: 8px; }
.custom-select-empty { padding: 14px 12px; color: var(--muted); font-size: 12.5px; text-align: center; }

/* ---------- بطاقة لقطة اللاعب الكبيرة ---------- */
.screenshot-card-img { width: 100%; border-radius: 12px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); min-height: 160px; display: flex; align-items: center; justify-content: center; }
.screenshot-card-img img { width: 100%; max-width: 100%; display: block; }

/* حزام أمان: ولا صورة جوّا بطاقة أو نافذة بتقدر تتجاوز عرض حاضنها.
   لقطة اللعبة عرضها ١٩٢٠ بكسل - بدون هالحد بتمدّ الصفحة كلها معها. */
.card img, .modal-box img { max-width: 100%; }
.screenshot-card-img svg { width: 40px; height: 40px; color: var(--muted); }

/* ---------- توست (إشعارات) بدل alert ---------- */
#toast-container {
  position: fixed; bottom: 22px; left: 22px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 12px 16px;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow);
  min-width: 240px; max-width: 360px;
  animation: toast-in 0.22s ease;
}
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast.out { transition: opacity 0.25s ease, transform 0.25s ease; opacity: 0; transform: translateY(8px); }
.toast .t-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.toast.success { border-color: rgba(61, 220, 132, 0.35); }
.toast.success .t-dot { background: var(--success); }
.toast.error { border-color: rgba(240, 71, 71, 0.4); }
.toast.error .t-dot { background: var(--danger); }
.toast.info .t-dot { background: var(--accent); }

/* ---------- شاشة خطأ مع زر إعادة محاولة ---------- */
.error-state {
  text-align: center; padding: 50px 20px; color: var(--muted);
}
.error-state .err-icon { font-size: 34px; margin-bottom: 10px; }
.error-state p { margin: 0 0 16px; font-size: 14px; }

/* ---------- أزرار الإجراءات الصغيرة (بجداول المركبات وغيرها) ---------- */
.mini-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 8px;
  color: var(--muted); cursor: pointer; box-shadow: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  margin-inline-start: 4px;
}
.mini-btn svg { width: 15px; height: 15px; }
.mini-btn:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--panel-hover); box-shadow: none; }
.mini-btn.danger { background: var(--panel-2); color: var(--muted); }
.mini-btn.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); box-shadow: none; }

/* ---------- أيقونة جوّا زر أو وسم (بديل الإيموجي) ----------
   الإيموجي بيختلف شكله من نظام لنظام وما بياخد لون الواجهة.
   الأيقونة SVG بتاخد currentColor فبتتماشى مع الزر بأي حالة (hover/disabled).
   ملاحظة: .mini-btn svg فوق أقوى تخصيصاً فبيضل ١٥px زي ما هو.
   والأزرار inline-block (مش flex) فمنعتمد على vertical-align للمحاذاة
   بدل gap - هيك ما منلمس تخطيط أي زر موجود. */
button svg, .tag svg { width: 14px; height: 14px; vertical-align: -2.5px; flex-shrink: 0; margin-inline-end: 5px; }
[data-icon] svg { width: 15px; height: 15px; vertical-align: -3px; }
.ico-sm { display: inline-flex; flex-shrink: 0; }
.ico-sm svg { width: 13px; height: 13px; margin: 0; }

/* أيقونة بديلة لصورة الشخصية لما ما يكون فيه صورة محفوظة */
.sib-ph { display: inline-flex; }
.sib-ph svg { width: 22px; height: 22px; margin: 0; }

/* ---------- قائمة منسدلة (أوامر السيرفر، إجراءات الشخصية) ----------
   كانت معرّفة جوّا players.ejs. نقلناها هون عشان أي صفحة تستعملها
   وما ينتسخ نفس الستايل بكل مكان ويصير كل قائمة شكلها مختلف. */
.srv-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; z-index: 100; display: none;
}
.srv-menu.open { display: block; }
.srv-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: right;
  background: none; border: none; box-shadow: none; color: var(--text);
  font-weight: 600; font-size: 13.5px; padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.srv-menu-item:hover { background: var(--panel-2); box-shadow: none; }
.srv-menu-item.danger { background: none; color: var(--text); }
.srv-menu-item.danger:hover { background: rgba(240, 71, 71, .12); color: var(--danger); }
.srv-menu-item .srv-ic { width: 22px; display: inline-flex; justify-content: center; }
.srv-menu-item .srv-ic svg { margin: 0; }
.srv-menu-sep { height: 1px; background: var(--border); margin: 5px 8px; }

/* ---------- سهم طيّ البطاقة (البلاغات) ---------- */
.collapse-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 7px;
  color: var(--muted); cursor: pointer; box-shadow: none;
  transition: transform 0.18s ease, color 0.15s ease, border-color 0.15s ease;
}
.collapse-arrow svg { width: 14px; height: 14px; }
.collapse-arrow:hover { color: var(--accent-hover); border-color: var(--accent); background: transparent; box-shadow: none; }
/* السهم بيشاور تحت لما البطاقة مفتوحة. الواجهة RTL فالمقفول بيشاور لليسار. */
.collapse-arrow.open { transform: rotate(90deg); color: var(--accent-hover); }

/* ---------- صورة شخصية مصغرة بالقوائم ---------- */
.avatar-mini {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); overflow: hidden; flex-shrink: 0; vertical-align: middle;
}
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.avatar-mini svg { width: 16px; height: 16px; }

/* ---------- شارة حالة المركبة (بالخارج/بالكراج) ---------- */
.state-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.state-badge.in { background: var(--success-soft); color: var(--success); border: 1px solid rgba(61,220,132,0.3); }
.state-badge.out { background: rgba(240,178,50,0.12); color: var(--warning); border: 1px solid rgba(240,178,50,0.3); }
.state-badge.impound { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(240,71,71,0.3); }

/* ---------- بانر تنبيه (أعلى صفحة الشخصية) ---------- */
.alert-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 12px; padding: 12px 18px; margin-bottom: 16px;
  font-size: 13.5px; font-weight: 700;
}
.alert-banner svg { width: 17px; height: 17px; vertical-align: -3px; margin-left: 6px; }
.alert-banner.high { background: linear-gradient(90deg, rgba(240,71,71,0.22), rgba(240,71,71,0.10)); border: 1px solid rgba(240,71,71,0.45); color: #ff9a9a; }
.alert-banner.mid { background: linear-gradient(90deg, rgba(240,178,50,0.18), rgba(240,178,50,0.08)); border: 1px solid rgba(240,178,50,0.4); color: var(--warning); }

/* ---------- رأس قسم مميّز (بار ملوّن على الجنب) ---------- */
.card .section-title {
  padding-right: 12px;
  border-right: 3px solid var(--accent);
  line-height: 1.1;
}

/* ---------- تحسين صفوف الجداول: زيبرا خفيفة + هوفر أوضح ---------- */
tbody tr:nth-child(even) td { background: rgba(255,255,255,0.014); }
tbody tr:hover td { background: rgba(88,101,242,0.07) !important; }

/* بطاقات إحصائية علوية بلمسة توهج للأخضر */
.stat-box .value { letter-spacing: -0.5px; }

/* شريط بحث بحجم موحّد بكل الصفحات */
.players-toolbar .search-wrap input { height: 40px; }

/* ===========================================================================
   حماية عامة من كسر التخطيط بالبيانات الطويلة
   السبب: أي قيمة قادمة من اللعبة قد تكون ضخمة (مبلغ مدبّل، اسم طويل،
   سبب حظر مطوّل، رخصة...) وكانت تمدّ الصفحة أفقياً وتخرّب الشكل.
   هذه القواعد تجعلها تلتف أو تُقصّ بدل أن تكسر الصفحة — تغطي كل الصفحات.
   =========================================================================== */

/* الخلايا: النص الطويل يلتف بدل أن يمدّ الجدول */
th, td { overflow-wrap: anywhere; word-break: break-word; }

/* الجدول لا يتجاوز بطاقته أبداً، ويمرَّر أفقياً عند الحاجة فقط */
.card { overflow-x: auto; }
.card > table { min-width: 100%; }

/* الوسوم والشارات: تُقصّ بثلاث نقاط بدل التمدد */
.tag, .state-badge, .opt-sub, .opt-label {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: inline-block; vertical-align: bottom;
}

/* عناصر flex لا تنكمش افتراضياً — هذا يسمح لها بالانكماش بدل دفع الصفحة */
.row > *, .players-toolbar > *, .char-page-header > * { min-width: 0; }

/* الأرقام والمعرّفات الطويلة (license/citizenid) */
code { overflow-wrap: anywhere; }

/* منع أي تمرير أفقي للصفحة كلها مهما حدث */
body { overflow-x: hidden; }