/* GT-DAYN — tokens.css */
:root {
  --bg:           #f0f4f8;
  --card:         #ffffff;
  --primary:      #312e81;
  --primary-mid:  #4338ca;
  --primary-lt:   #ede9fe;
  --accent:       #818cf8;
  --success:      #059669;
  --success-lt:   #d1fae5;
  --danger:       #dc2626;
  --danger-lt:    #fee2e2;
  --warning:      #d97706;
  --warning-lt:   #fef3c7;
  --text:         #1e1b4b;
  --text-2:       #4b5563;
  --text-3:       #9ca3af;
  --border:       #e5e7eb;
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    18px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06);
  --shadow:       0 4px 16px rgba(49,46,129,.10);
  --font:         'Cairo', sans-serif;
  --fab-bottom:   84px;
}

[data-theme="dark"] {
  --bg:          #0f0e1a;
  --card:        #1a1830;
  --primary:     #818cf8;
  --primary-mid: #a5b4fc;
  --primary-lt:  #1e1b4b;
  --accent:      #c7d2fe;
  --text:        #e0e7ff;
  --text-2:      #a5b4fc;
  --text-3:      #6366f1;
  --border:      #2d2b4e;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.3);
  --shadow:      0 4px 16px rgba(0,0,0,.4);
}

*, *::before, *::after {
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  height: 100%;
}

body {
  padding: 14px 14px 160px;   /* مسافة كافية تحت المحتوى لتجاوز الـ FAB والـ nav */
  max-width: 600px;
  margin: 0 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (display-mode: standalone) { body { padding-top: 0.6cm; } }

/* ── Scrollbar ────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Typography ──────────────────────────────── */
h1,h2,h3,h4 { margin: 0; line-height: 1.2; }
p           { margin: 0; }

/* ── Animations ──────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes spin  { to { transform: rotate(360deg); } }

.fade-up { animation: fadeUp .22s ease both; }

/* ── Cards ───────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; border: none; cursor: pointer;
  font-family: var(--font); font-weight: 700; border-radius: var(--radius-sm);
  transition: opacity .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn-primary   { background: var(--primary); color: #fff; }
.btn-secondary { background: var(--primary-lt); color: var(--primary); }
.btn-danger    { background: var(--danger-lt); color: var(--danger); }
.btn-success   { background: var(--success-lt); color: var(--success); }
.btn-ghost     { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.btn-icon      {
  width: 36px; height: 36px; background: var(--card);
  color: var(--text-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .9rem;
}

/* ── FAB ─────────────────────────────────────── */
.fab {
  position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff;
  padding: 0 24px; height: 52px; border-radius: 26px;
  font-size: .95rem; font-weight: 800; font-family: var(--font);
  box-shadow: 0 6px 20px rgba(49,46,129,.35);
  cursor: pointer; border: none; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
  transition: box-shadow .2s, transform .15s;
  z-index: 100;
}
.fab:active { transform: translateX(-50%) scale(.97); }

/* ── Tab Bar ─────────────────────────────────── */
.tab-bar {
  display: flex; gap: 4px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px;
  margin-bottom: 14px;
}
.tab-btn {
  flex: 1; height: 36px; border: none; cursor: pointer;
  border-radius: var(--radius-sm); font-family: var(--font);
  font-size: .82rem; font-weight: 700; color: var(--text-3);
  background: transparent; transition: all .18s;
}
.tab-btn.active { background: var(--primary); color: #fff; }

/* ── Input wrapper ───────────────────────────── */
.input-wrap {
  position: relative; margin-bottom: 10px;
}
.input-wrap i,
.input-wrap .inp-icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: .85rem; pointer-events: none;
}
.input-wrap input, .input-wrap select {
  width: 100%; height: 44px;
  background: #f8fafc; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-family: var(--font);
  font-size: .88rem; font-weight: 600; color: var(--text);
  padding: 0 36px 0 12px; transition: border-color .2s;
  appearance: none;
}
[data-theme="dark"] .input-wrap input,
[data-theme="dark"] .input-wrap select { background: #1e1b4b; }
.input-wrap input:focus,
.input-wrap select:focus { border-color: var(--primary-mid); background: var(--card); }

/* ── Modal ───────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  z-index: 500; align-items: flex-start; justify-content: center;
  padding-top: 18%;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 20px; width: calc(100% - 32px); max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: fadeUp .2s ease;
}
.modal-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.modal-ico {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.modal-title   { font-size: 1rem; font-weight: 800; color: var(--text); }
.modal-subtitle{ font-size: .78rem; color: var(--text-3); margin-top: 2px; }
.modal-btns    { display: flex; gap: 8px; margin-top: 14px; }
.mbtn {
  flex: 1; height: 44px; border: none; cursor: pointer;
  border-radius: var(--radius-sm); font-family: var(--font);
  font-size: .88rem; font-weight: 700; transition: opacity .15s;
}
.mbtn:active { opacity: .8; }
.mbtn-ok     { background: var(--primary); color: #fff; }
.mbtn-cancel { background: var(--bg); color: var(--text-2); border: 1px solid var(--border); }
.mbtn-del    { background: var(--danger-lt); color: var(--danger); }

/* ── Progress ────────────────────────────────── */
.progress-track {
  height: 5px; background: var(--border);
  border-radius: 10px; overflow: hidden; margin: 6px 0;
}
.progress-fill {
  height: 100%; border-radius: 10px;
  background: linear-gradient(90deg, var(--primary-mid), var(--accent));
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.progress-fill.done { background: linear-gradient(90deg, var(--success), #34d399); }

/* ── Empty state ─────────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 0;
  color: var(--text-3); font-size: .88rem;
}
.empty-state i { font-size: 2.5rem; margin-bottom: 12px; display: block; opacity: .4; }

/* ── Toast ───────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  z-index: 1000; display: flex; flex-direction: column; gap: 6px;
  align-items: center; pointer-events: none;
}
.toast {
  background: var(--text); color: var(--card);
  padding: 10px 20px; border-radius: 20px;
  font-size: .84rem; font-weight: 600;
  animation: fadeUp .2s ease;
  pointer-events: none;
}
.toast.error   { background: var(--danger); }
.toast.success { background: var(--success); }

/* ── Spinner ─────────────────────────────────── */
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--primary);
  animation: spin .7s linear infinite; display: inline-block;
}

/* ── Responsive desktop ──────────────────────── */
@media (min-width: 640px) {
  body { padding-top: 24px; }
  .fab { bottom: 74px; }
}