/* =====================================================================
   Saudi Future — Components
   ===================================================================== */

/* ====== Buttons ====== */
.btn {
  --bg: var(--green-800);
  --fg: var(--cream-50);
  --bd: transparent;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--bd);
  border-radius: var(--r-pill);
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: var(--fs-16);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out),
              background var(--d-base) var(--ease-soft),
              color var(--d-base) var(--ease-soft),
              border-color var(--d-base) var(--ease-soft),
              box-shadow var(--d-base) var(--ease-soft);
  position: relative;
  isolation: isolate;
  user-select: none;
  text-align: center;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}

.btn--primary { --bg: var(--green-800); --fg: var(--cream-50); }
.btn--primary:hover { --bg: var(--green-700); }
.btn--secondary { --bg: var(--cream-100); --fg: var(--green-800); --bd: var(--green-800); }
.btn--secondary:hover { --bg: var(--cream-200); }
.btn--ghost { --bg: transparent; --fg: var(--green-800); --bd: transparent; }
.btn--ghost:hover { --bg: var(--green-50); }
.btn--gold { --bg: var(--gold); --fg: var(--green-900); }
.btn--gold:hover { --bg: var(--gold-light); }
.btn--danger { --bg: var(--danger); --fg: #fff; }
.btn--danger:hover { background: #B91C1C; }
.btn--outline-inverse {
  --bg: transparent; --fg: var(--cream-50); --bd: rgba(251, 248, 241, 0.5);
}
.btn--outline-inverse:hover { --bg: rgba(255, 255, 255, 0.12); --bd: var(--cream-50); }

.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-14); }
.btn--lg { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-18); }
.btn--xl { padding: var(--sp-5) var(--sp-10); font-size: var(--fs-20); }
.btn--block { width: 100%; }

.btn .ico { width: 1.1em; height: 1.1em; }

/* ====== Form fields ====== */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-14); font-weight: 600; color: var(--ink-700); }
.field .hint { font-size: var(--fs-12); color: var(--text-muted); }
.field .error { font-size: var(--fs-12); color: var(--danger); font-weight: 600; }

.input, .textarea, .select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-16);
  transition: border-color var(--d-fast) var(--ease-soft),
              box-shadow var(--d-fast) var(--ease-soft),
              background var(--d-fast) var(--ease-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--green-500);
  box-shadow: var(--sh-glow);
  outline: none;
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus {
  box-shadow: var(--sh-glow-danger);
}

.textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B3D2E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
  padding-left: var(--sp-10);
}

/* Checkbox / Radio */
.check {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-14); cursor: pointer;
  user-select: none;
}
.check input[type="checkbox"], .check input[type="radio"] {
  accent-color: var(--green-800);
  width: 18px; height: 18px;
}

/* ====== Card ====== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-1);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.card--hoverable:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.card__title { font-family: var(--ff-serif); font-size: var(--fs-24); font-weight: 700; color: var(--green-800); margin-bottom: var(--sp-2); }
.card__desc  { color: var(--text-secondary); font-size: var(--fs-14); line-height: 1.7; }

/* ====== Badge ====== */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 4px var(--sp-3);
  font-size: var(--fs-12); font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--cream-100);
  color: var(--ink-700);
}
.badge--success { background: var(--success-bg); color: #166534; }
.badge--warning { background: var(--warning-bg); color: #92400E; }
.badge--danger  { background: var(--danger-bg);  color: #991B1B; }
.badge--info    { background: var(--info-bg);    color: #1E40AF; }
.badge--green   { background: var(--green-100);  color: var(--green-800); }
.badge--gold    { background: rgba(201, 162, 75, 0.18); color: var(--gold-deep); }

/* ====== Toast ====== */
.toast-stack {
  position: fixed; top: var(--sp-6);
  inset-inline-start: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  z-index: var(--z-toast); pointer-events: none;
}
.toast {
  background: var(--green-800); color: var(--cream-50);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  min-width: 240px; max-width: 360px;
  pointer-events: auto;
  animation: toastIn var(--d-slow) var(--ease-out);
}
.toast--success { background: var(--success); }
.toast--danger  { background: var(--danger); }
.toast--warning { background: var(--warning); color: #1F1300; }
@keyframes toastIn {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ====== Modal ====== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(6, 30, 23, 0.65);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal);
  padding: var(--sp-4);
  animation: fadeIn var(--d-base) var(--ease-soft);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  max-width: 480px; width: 100%;
  box-shadow: var(--sh-3);
  animation: modalIn var(--d-slow) var(--ease-out);
}
@keyframes modalIn {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.modal h3 { color: var(--green-800); margin-bottom: var(--sp-3); }

/* ====== Table ====== */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border-soft); background: var(--white); box-shadow: var(--sh-1); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); }
.table th, .table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: start;
  border-bottom: 1px solid var(--border-soft);
}
.table thead th {
  background: var(--cream-100);
  color: var(--green-800);
  font-weight: 700;
  font-size: var(--fs-13, 0.8125rem);
  position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
.table tbody tr { transition: background var(--d-fast) var(--ease-soft); }
.table tbody tr:hover { background: var(--cream-50); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num { font-variant-numeric: tabular-nums; }

/* ====== Empty state ====== */
.empty {
  padding: var(--sp-12);
  text-align: center;
  background: var(--cream-50);
  border: 2px dashed var(--border-firm);
  border-radius: var(--r-xl);
  color: var(--text-secondary);
}
.empty h4 { color: var(--green-700); margin-bottom: var(--sp-2); }

/* ====== Stat ====== */
.stat {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.stat__num {
  font-family: var(--ff-serif);
  font-size: clamp(var(--fs-44), 6vw, var(--fs-72));
  font-weight: 900;
  color: var(--green-800);
  line-height: 1;
  display: block;
  margin-bottom: var(--sp-2);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__label { color: var(--text-secondary); font-size: var(--fs-14); font-weight: 500; }

/* ====== Workshop card ====== */
.wcard {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative; overflow: hidden;
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-soft);
  min-height: 220px;
}
.wcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--green-200); }
.wcard__top { display: flex; gap: var(--sp-2); align-items: center; }
.wcard__title { font-family: var(--ff-serif); font-size: var(--fs-20); font-weight: 700; color: var(--green-800); line-height: 1.3; }
.wcard__meta { display: flex; gap: var(--sp-3); font-size: var(--fs-13, 0.81rem); color: var(--text-secondary); flex-wrap: wrap; }
.wcard__meta .ico { width: 14px; height: 14px; }
.wcard__seats {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-13, 0.81rem); color: var(--text-secondary);
}
.wcard__bar { height: 6px; background: var(--cream-200); border-radius: 999px; overflow: hidden; flex: 1; }
.wcard__bar > span { display: block; height: 100%; background: var(--green-500); transition: width var(--d-slow) var(--ease-out); }
.wcard--full .wcard__bar > span { background: var(--danger); }
.wcard__actions { margin-top: auto; display: flex; gap: var(--sp-2); }

/* ====== Divider with ornament ====== */
.ornament {
  display: flex; align-items: center; gap: var(--sp-4);
  margin: var(--sp-6) auto;
  color: var(--green-500);
  opacity: 0.5;
}
.ornament::before, .ornament::after {
  content: ""; flex: 1; height: 1px; background: currentColor;
}
.ornament svg { width: 18px; height: 18px; }

/* ====== Skeleton ====== */
.skel {
  background: linear-gradient(90deg, var(--cream-100), var(--cream-200), var(--cream-100));
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: skel 1.4s linear infinite;
}
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ====== Tabs ====== */
.tabs {
  display: flex; gap: var(--sp-2);
  background: var(--cream-100);
  padding: var(--sp-1);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.tabs button {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  font-weight: 600;
  color: var(--text-secondary);
  transition: background var(--d-fast), color var(--d-fast);
}
.tabs button.active {
  background: var(--green-800); color: var(--cream-50);
  box-shadow: var(--sh-1);
}
.tabs button:hover:not(.active) { color: var(--green-800); }