/* أنماط إضافية فوق Tailwind - النظام العربي RTL */
* { -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c7bfa8; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #ece4d2;
  box-shadow: 0 1px 3px rgba(27,42,74,0.06);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 10px; font-weight: 600; padding: .6rem 1.1rem; transition: all .15s ease;
  cursor: pointer; border: none; font-size: .925rem;
}
.btn-primary { background: #1B2A4A; color: #fff; }
.btn-primary:hover { background: #131f38; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-emerald { background: #0F7B5F; color: #fff; }
.btn-emerald:hover { background: #0a5240; }
.btn-amber { background: #c98a1f; color: #fff; }
.btn-danger { background: #b3382c; color: #fff; }
.btn-outline { background: #fff; color: #1B2A4A; border: 1px solid #d6ddea; }
.btn-outline:hover { background: #eef1f6; }
.btn-ghost { background: transparent; color: #1B2A4A; }
.btn-ghost:hover { background: #eef1f6; }
.btn-sm { padding: .4rem .8rem; font-size: .825rem; }
.btn-block { width: 100%; }

.input {
  width: 100%; border: 1px solid #dcd3ba; border-radius: 10px; padding: .6rem .85rem;
  background: #fff; font-family: inherit; font-size: .925rem; outline: none; transition: border-color .15s;
}
.input:focus { border-color: #1B2A4A; box-shadow: 0 0 0 3px rgba(27,42,74,.08); }
.input-sm { width: auto; padding: .35rem .6rem; font-size: .8rem; border-radius: 8px; }
.label { display: block; font-size: .8rem; color: #5b5541; margin-bottom: .3rem; font-weight: 600; }

.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge-green { background: #e7f5f0; color: #0a5240; }
.badge-amber { background: #fbf0dc; color: #94620d; }
.badge-red { background: #fbe6e3; color: #8f2a1f; }
.badge-blue { background: #e2ecfb; color: #1e4d8f; }
.badge-gray { background: #eee9db; color: #6b6552; }

.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.status-dot.online { background: #0F7B5F; box-shadow: 0 0 0 3px rgba(15,123,95,.18); }
.status-dot.paused { background: #c98a1f; box-shadow: 0 0 0 3px rgba(201,138,31,.18); }
.status-dot.offline { background: #b9b2a0; }
.status-dot.mission { background: #1e4d8f; box-shadow: 0 0 0 3px rgba(30,77,143,.18); }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(19,31,56,.55); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  backdrop-filter: blur(2px);
}
.modal-box { background: #fff; border-radius: 18px; max-width: 440px; width: 100%; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.25); }

.toast { pointer-events: auto; background: #1B2A4A; color: #fff; padding: .8rem 1.1rem; border-radius: 12px; font-size: .875rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: 380px; }
.toast.success { background: #0F7B5F; }
.toast.error { background: #b3382c; }
.toast.warn { background: #c98a1f; }

.nav-link { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-radius: 10px; color: #d6ddea; font-weight: 500; font-size: .9rem; }
.nav-link.active { background: rgba(255,255,255,.12); color: #fff; }
.nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }

.table-clean { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table-clean th { text-align: right; padding: .6rem .75rem; color: #6b6552; font-weight: 600; border-bottom: 2px solid #ece4d2; white-space: nowrap; }
.table-clean td { padding: .6rem .75rem; border-bottom: 1px solid #f1ebdc; white-space: nowrap; }
.table-clean tr:hover td { background: #faf8f2; }

.skeleton { background: linear-gradient(90deg, #ece4d2 25%, #f5f1e9 50%, #ece4d2 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.fade-in { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.big-timer { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

@media (max-width: 640px) {
  .card { border-radius: 14px; }
}