body {
  font-family: "Cairo", sans-serif;
  background-color: #f6f9f7;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300A86B' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.font-num { font-family: "Plus Jakarta Sans", "Cairo", sans-serif; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #00a86b; border-radius: 9999px; }
.glass-nav { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); }
.asset-float { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
input[type="number"]::-webkit-inner-spin-button { opacity: 0.4; }

/* Never let the page scroll sideways; wide content scrolls inside its own container */
html, body { overflow-x: clip; }
img, video { max-width: 100%; }
input, select, textarea { min-width: 0; }

/* Responsive data tables: on phones each row becomes a stacked card.
   Column names come from the table header (app.js copies them into data-label). */
@media (max-width: 639px) {
  table.rtable { min-width: 0 !important; }
  table.rtable thead { display: none; }
  table.rtable, table.rtable tbody, table.rtable tr, table.rtable td { display: block; width: 100%; }
  table.rtable tr { padding: 0.75rem 1rem; border-top: 1px solid #f1f5f9; }
  table.rtable tr:first-child { border-top: 0; }
  table.rtable td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0 !important; text-align: right; }
  table.rtable td[dir="ltr"] { flex-direction: row-reverse; } /* keep the label on the right for LTR numbers */
  table.rtable td::before { content: attr(data-label); flex-shrink: 0; font-size: 11px; font-weight: 700; color: #64748b; }
  table.rtable td[data-label=""]::before { content: none; }
  table.rtable td[data-label=""] { justify-content: flex-start; flex-wrap: wrap; }
  table.rtable td > * { max-width: 70%; }
  table.rtable td[data-label=""] > * { max-width: 100%; }
}

/* Comfortable tap targets for footer and breadcrumb links on touch screens */
@media (pointer: coarse) {
  footer a, nav[aria-label="breadcrumb"] a { display: inline-block; padding-block: 0.4rem; }
}