/* ═══════════════════════════════════════════════════════════════════════════
   Takamal Token System — Design System
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Colors ─────────────────────────────────────────────────────────────── */
  --c-primary:        #1565C0;
  --c-primary-light:  #1976D2;
  --c-primary-dark:   #0D47A1;
  --c-primary-bg:     #E3F2FD;

  --c-success:        #2E7D32;
  --c-success-bg:     #E8F5E9;
  --c-warning:        #E65100;
  --c-warning-bg:     #FFF3E0;
  --c-danger:         #C62828;
  --c-danger-bg:      #FFEBEE;
  --c-info:           #01579B;
  --c-info-bg:        #E1F5FE;

  --c-bg:             #F0F4F8;
  --c-surface:        #FFFFFF;
  --c-border:         #DDE3EA;
  --c-text:           #1A2332;
  --c-text-muted:     #5E7087;
  --c-text-disabled:  #A0AEBB;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font:             'Cairo', sans-serif;
  --text-xs:          0.75rem;
  --text-sm:          0.875rem;
  --text-base:        1rem;
  --text-lg:          1.125rem;
  --text-xl:          1.375rem;
  --text-2xl:         1.75rem;
  --text-3xl:         2.25rem;
  --text-4xl:         3rem;
  --text-giant:       8rem;

  /* ── Spacing ─────────────────────────────────────────────────────────────── */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.25rem; --s-6: 1.5rem;
  --s-8: 2rem;     --s-10:2.5rem;  --s-12:3rem;  --s-16:4rem;

  /* ── Radius ──────────────────────────────────────────────────────────────── */
  --r-sm:   6px;  --r-md:  10px;  --r-lg:  14px;
  --r-xl:   20px; --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 14px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 28px rgba(0,0,0,0.13);

  /* ── Transitions ─────────────────────────────────────────────────────────── */
  --t-fast: 120ms ease;
  --t-base: 220ms ease;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html { font-size: 16px; }

body {
  font-family: var(--font);
  font-size:   var(--text-base);
  color:       var(--c-text);
  background:  var(--c-bg);
  direction:   rtl;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Connection Status Bar ─────────────────────────────────────────────────── */
.conn-bar {
  height: 4px;
  background: var(--c-success);
  transition: background var(--t-base);
}
.conn-bar.reconnecting { background: #F9A825; animation: pulse-bar 1.2s infinite; }
.conn-bar.disconnected { background: var(--c-danger); }
@keyframes pulse-bar { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--s-2);
  padding:         var(--s-3) var(--s-6);
  border:          none;
  border-radius:   var(--r-md);
  font-family:     var(--font);
  font-size:       var(--text-base);
  font-weight:     600;
  cursor:          pointer;
  transition:      all var(--t-fast);
  user-select:     none;
  white-space:     nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 3px solid var(--c-primary-light); outline-offset: 2px; }

.btn-primary { background: var(--c-primary);  color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--c-primary-dark); }

.btn-success { background: var(--c-success);  color: #fff; }
.btn-success:hover:not(:disabled) { background: #1B5E20; }

.btn-danger  { background: var(--c-danger);   color: #fff; }
.btn-danger:hover:not(:disabled)  { background: #8E0000; }

.btn-warning { background: var(--c-warning);  color: #fff; }
.btn-warning:hover:not(:disabled) { background: #BF360C; }

.btn-ghost {
  background: transparent;
  color:      var(--c-text-muted);
  border:     1.5px solid var(--c-border);
}
.btn-ghost:hover:not(:disabled) { background: var(--c-bg); color: var(--c-text); }

.btn-xl { font-size: var(--text-xl); padding: var(--s-5) var(--s-10); border-radius: var(--r-lg); }
.btn-lg { font-size: var(--text-lg); padding: var(--s-4) var(--s-8);  border-radius: var(--r-md); }
.btn-sm { font-size: var(--text-sm); padding: var(--s-2) var(--s-4);  border-radius: var(--r-sm); }
.btn-block { width: 100%; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-sm);
}
.card-body   { padding: var(--s-6); }
.card-header { padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--c-border); font-weight: 700; font-size: var(--text-lg); }

/* ── Form Controls ─────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--s-2); }

.form-label { font-weight: 600; font-size: var(--text-sm); color: var(--c-text-muted); }

.form-input {
  width:         100%;
  padding:       var(--s-4) var(--s-4);
  border:        2px solid var(--c-border);
  border-radius: var(--r-md);
  font-family:   var(--font);
  font-size:     var(--text-lg);
  color:         var(--c-text);
  background:    var(--c-surface);
  transition:    border-color var(--t-fast);
  outline:       none;
}
.form-input:focus { border-color: var(--c-primary-light); }
.form-input.error { border-color: var(--c-danger); }
.form-input[dir="ltr"] { direction: ltr; text-align: left; }

.form-error { font-size: var(--text-sm); color: var(--c-danger); }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.badge-waiting { background: var(--c-primary-bg); color: var(--c-primary-dark); }
.badge-called  { background: var(--c-warning-bg); color: var(--c-warning); }
.badge-served  { background: var(--c-success-bg); color: var(--c-success); }
.badge-noshow  { background: #ECEFF1; color: #546E7A; }
.badge-vip     { background: #FFF8E1; color: #F57F17; }

/* ── Loading Spinner ───────────────────────────────────────────────────────── */
.spinner {
  width: 22px; height: 22px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast notification ────────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: var(--s-6); left: 50%;
  transform: translateX(-50%); z-index: 9999;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.toast {
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-lg);
  font-weight: 600; font-size: var(--text-base);
  color: #fff; box-shadow: var(--shadow-md);
  animation: toast-in .25s ease;
}
.toast.success { background: var(--c-success); }
.toast.error   { background: var(--c-danger); }
.toast.info    { background: var(--c-primary); }
@keyframes toast-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ── Language Toggle Button ────────────────────────────────────────────────── */
.lang-btn {
  background:    rgba(255,255,255,0.15);
  border:        1.5px solid rgba(255,255,255,0.35);
  color:         #fff;
  font-family:   var(--font);
  font-size:     var(--text-sm);
  font-weight:   700;
  padding:       var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  cursor:        pointer;
  transition:    all var(--t-fast);
  letter-spacing: .5px;
}
.lang-btn:hover { background: rgba(255,255,255,0.28); }

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.text-muted    { color: var(--c-text-muted); }
.text-center   { text-align: center; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 800; }
.mt-auto       { margin-top: auto; }
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-center{ justify-content: center; }
.justify-between{justify-content: space-between; }
.gap-2         { gap: var(--s-2); }
.gap-4         { gap: var(--s-4); }
.gap-6         { gap: var(--s-6); }
.w-full        { width: 100%; }
.h-full        { height: 100%; }
.grow          { flex: 1; }