:root {
  --brand: #116B2E;
  --brand-dark: #0d5424;
  --accent: #FBDF6B;
}

body {
  font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
  background: #f4f6f5;
  color: #1b1d1f;
}

.app-nav {
  background: var(--brand);
}
.app-nav .navbar-brand,
.app-nav .nav-link {
  color: #fff;
}
.app-nav .nav-link:hover {
  color: var(--accent);
}

.btn-brand {
  background: var(--accent);
  border-color: var(--accent);
  color: #4a3a00;
  font-weight: 600;
}
.btn-brand:hover {
  background: #f7d33f;
  border-color: #f7d33f;
  color: #4a3a00;
}

.card {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid #eceef0;
  border-radius: 14px 14px 0 0 !important;
  font-weight: 700;
}

.page-title {
  font-weight: 700;
  margin-bottom: 1rem;
}

/* ---------------------------------------------------- field builder --- */
.field-row {
  background: #fff;
  border: 1px solid #e4e7e9;
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.65rem;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.field-row:hover {
  border-color: #cdd3d6;
}
.field-row.sortable-ghost {
  opacity: 0.45;
  border-style: dashed;
  border-color: var(--brand);
}
.field-row.sortable-chosen {
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14);
}
.field-row.to-delete {
  opacity: 0.45;
  background: #fff5f5;
  border-color: #f3c0c0;
}

.drag-handle {
  cursor: grab;
  color: #9aa3a8;
  font-size: 1.15rem;
  padding: 0 0.35rem;
  user-select: none;
}
.drag-handle:active {
  cursor: grabbing;
}

.field-row .form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #68717a;
  margin-bottom: 0.15rem;
}
.field-row .form-control,
.field-row .form-select {
  font-size: 0.9rem;
}

.order-input {
  display: none;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #7a858c;
}
.empty-state i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.5rem;
  color: #c3cace;
}

/* ------------------------------------------------------- voucher UI --- */
.preview-frame {
  width: 100%;
  height: 78vh;
  border: 1px solid #e0e4e6;
  border-radius: 12px;
  background: #fff;
}

.status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.status-confirmed { background: #dcf3e3; color: #0d5424; }
.status-draft     { background: #fdf3d2; color: #7a5a00; }
.status-cancelled { background: #fbdede; color: #9a1f1f; }

.table > :not(caption) > * > * {
  padding: 0.7rem 0.75rem;
}

.login-wrap {
  max-width: 400px;
  margin: 8vh auto;
}