/* R1H Game Store — Dark Premium Gaming Theme */
:root {
  --r1h-bg: #0a0a0f;
  --r1h-card: #12121b;
  --r1h-border: #2a2a3a;
  --r1h-muted: #8b8ba3;
  --r1h-text: #e8e8f0;
  --r1h-primary: #a855f7;
  --r1h-accent: #22d3ee;
  --r1h-success: #10b981;
  --r1h-danger: #ef4444;
  --r1h-warning: #f59e0b;
}
html, body { background: var(--r1h-bg); color: var(--r1h-text); }
body { font-family: 'Cairo', system-ui, -apple-system, sans-serif; }
.font-orbitron { font-family: 'Orbitron', system-ui, sans-serif; letter-spacing: 0.02em; }
.font-cairo { font-family: 'Cairo', system-ui, sans-serif; }

/* Tailwind theme extension */
.bg-r1h-bg { background-color: var(--r1h-bg); }
.bg-r1h-card { background-color: var(--r1h-card); }
.border-r1h-border { border-color: var(--r1h-border); }
.text-r1h-muted { color: var(--r1h-muted); }
.text-r1h-text { color: var(--r1h-text); }
.text-r1h-primary { color: var(--r1h-primary); }
.text-r1h-accent { color: var(--r1h-accent); }
.bg-r1h-primary { background-color: var(--r1h-primary); }
.bg-r1h-accent { background-color: var(--r1h-accent); }
.from-r1h-primary { --tw-gradient-from: var(--r1h-primary); --tw-gradient-to: rgb(168 85 247 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-r1h-accent { --tw-gradient-to: rgb(34 211 238 / 0);  --tw-gradient-stops: var(--tw-gradient-from), var(--r1h-accent), var(--tw-gradient-to); }
.to-r1h-accent { --tw-gradient-to: var(--r1h-accent); }
.from-r1h-card { --tw-gradient-from: var(--r1h-card); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-r1h-bg { --tw-gradient-from: var(--r1h-bg); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-r1h-bg { --tw-gradient-stops: var(--tw-gradient-from), var(--r1h-bg), var(--tw-gradient-to); }

.shadow-glow { box-shadow: 0 8px 32px rgba(168, 85, 247, 0.35), 0 0 0 1px rgba(168, 85, 247, 0.15); }
.shadow-glow-sm { box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25); }

/* Cards & hover */
.card-hover { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-4px); border-color: var(--r1h-accent); box-shadow: 0 12px 32px rgba(34, 211, 238, 0.15); }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: skel 1.4s linear infinite; border-radius: 0.75rem; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 18px; border-radius: 12px; background: rgba(20,20,30,0.95); border: 1px solid var(--r1h-border); z-index: 9999; backdrop-filter: blur(8px); animation: toastIn .25s ease; }
.toast.success { border-color: var(--r1h-success); }
.toast.error { border-color: var(--r1h-danger); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* RTL/LTR helpers */
[dir="ltr"] body { font-family: 'Inter', 'Cairo', system-ui, sans-serif; }

/* Modal — Centered, responsive, full-width on mobile (FIX for clipped admin form) */
.modal-backdrop {
  position: fixed !important;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: fadeIn .2s ease;
}
.modal-card {
  position: relative;
  background: var(--r1h-card);
  border: 1px solid var(--r1h-border);
  border-radius: 1.25rem;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(168, 85, 247, 0.15);
  animation: modalIn .25s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Mobile: take full screen */
@media (max-width: 640px) {
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal-card {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  /* Force form fields into 1 column on mobile inside modals */
  .modal-card form.grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .modal-card form .col-span-2 { grid-column: 1 / -1 !important; }
}
/* Lock body scroll when modal is open */
body.modal-open { overflow: hidden; }

/* Status badges */
.badge { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.badge-pending { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-review { background: rgba(34, 211, 238, 0.15); color: var(--r1h-accent); border: 1px solid rgba(34, 211, 238, 0.3); }
.badge-delivered { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-rejected, .badge-cancelled { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Inputs in admin */
.inp { padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,0.4); border: 1px solid var(--r1h-border); color: var(--r1h-text); width: 100%; outline: none; transition: border-color .15s; }
.inp:focus { border-color: var(--r1h-accent); }
.btn { padding: 10px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: transform .1s; display: inline-flex; align-items: center; gap: 6px; border: 0; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: linear-gradient(90deg, var(--r1h-primary), var(--r1h-accent)); color: white; }
.btn-secondary { background: rgba(255,255,255,0.06); color: var(--r1h-text); border: 1px solid var(--r1h-border); }
.btn-success { background: var(--r1h-success); color: white; }
.btn-danger { background: var(--r1h-danger); color: white; }
.btn-warning { background: var(--r1h-warning); color: white; }

/* Animations */
.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Admin layout polish ===== */
#admin-app .admin-tab { white-space: nowrap; }
@media (max-width: 768px) {
  /* Make admin sidebar horizontal scroll on mobile for accessibility */
  #admin-app aside {
    position: relative !important;
    top: 0 !important;
  }
  #admin-app aside nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  #admin-app aside nav button {
    width: auto;
    flex: 1 1 calc(50% - 4px);
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* Make tables scroll on mobile gracefully */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* line-clamp utility (used in product cards) */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aspect-square { aspect-ratio: 1 / 1; }