/* ===== JarvisX utilities & tokens (add-ons) ===== */

:root{
  --jx-gold-1: #ffd54d;
  --jx-gold-2: #ffea7a;
  --jx-gold-3: #f7c419;
  --jx-gold-4: #b08900;
  --jx-text-dim: #bfc2c9;
  --jx-border: rgba(255,255,255,.12);
  --radius-xl: 14px;
}

/* Gold text + links */
.gold-text{ color: var(--jx-gold-1); }
.link{ color: var(--jx-gold-1); text-decoration: underline; }

/* Basic layout helpers (non-destructive; safe to coexist with styles.css) */
.container{ width: min(1100px, 92vw); margin: 0 auto; }
.grid{ display: grid; gap: 12px; }
.cols-2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){ .cols-2{ grid-template-columns: 1fr; } }

/* Surface cards used in base.html */
.surface{
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
}
.spacious{ padding: 10px 12px; }
.rounded-xl{ border-radius: var(--radius-xl); }

/* Reveal-on-scroll (paired with ui.js) */
.will-reveal{ opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.reveal-in{ opacity: 1 !important; transform: none !important; }

/* Hero blocks (pricing/docs/home) */
.jx-hero.hero{ margin-top: 0; padding-top: 12px; }
.hero-title{ font-size: 2rem; margin: 0; }
.hero-subtitle{ margin: 6px 0 0; color: var(--jx-text-dim); }

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 14px;
}
.jx-card{ /* alias for reveal set */ }

/* Horizontal rule accent */
.hr-gold{
  height: 1px; border: 0; margin: 10px 0;
  background: linear-gradient(90deg, rgba(255,213,77,.0), rgba(255,213,77,.55), rgba(255,213,77,.0));
}

/* Inputs (light defaults; your styles.css can override) */
.input, .select, .textarea, .file-input{
  width: 100%;
  color: #eef0f3;
  background: #0f0f10;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
}
.input, .select, .file-input{ padding: 10px 12px; }
.textarea{ padding: 12px; min-height: 120px; }

/* Buttons (non-invasive; aligns with base.html usage) */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 14px; border-radius: 12px;
  font-weight: 800; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); color: #e9eaec; background: #17181b;
  transition: filter .15s ease, transform .02s ease;
  -webkit-tap-highlight-color: transparent; /* mobile tap clarity */
}
.btn:hover{ filter: brightness(1.06); }
.btn:active{ transform: translateY(1px); }
.btn[disabled], .btn.is-loading{ opacity: .65; cursor: not-allowed; }

.btn.primary{
  border-color: rgba(255,213,77,.35);
  background: linear-gradient(180deg,#2a2408,#1a1d25);
  box-shadow: 0 8px 26px rgba(255,213,77,.18), inset 0 1px 0 rgba(255,255,255,.06);
  color: #f4f5f7;
}
.btn.ghost{
  background: transparent;
  border-color: rgba(255,255,255,.14);
  color: #e5e6ea;
}
.btn.outline-btn{
  background: transparent;
  color: #e9eaec;
  border-color: rgba(255,255,255,.22);
}
.btn.outline-btn:hover{ background: rgba(255,255,255,.06); }

.btn.gold-btn{
  background: var(--jx-gold-1);
  color: #15110a;
  border-color: color-mix(in srgb, var(--jx-gold-1) 80%, black 20%);
  box-shadow: 0 8px 30px rgba(255,213,77,.35);
}
.btn.gold-btn:hover{
  background: color-mix(in srgb, var(--jx-gold-1) 90%, white 10%);
}

/* Navbar current item */
.nav-cta.is-current{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

/* Table border token used by submissions.html */
.jx-table th{ border-bottom-color: var(--jx-border); }

/* ===== Global Submission Progress Overlay ===== */
#progressOverlay{
  position: fixed; inset: 0;
  display: none; /* toggled via JS */
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
  z-index: 9999;
}
#progressOverlay.active{ display: flex; }
#progressOverlay .progress-modal{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:28px 36px; border-radius:12px;
  background: linear-gradient(180deg, #121212, #1b1b1b);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 40px rgba(0,0,0,.6), inset 0 0 1px rgba(255,255,255,.06);
}
#progressOverlay .progress-text{
  font-size:1.05rem; letter-spacing:.4px; color:#eaeaea; opacity:.9;
}
#progressOverlay .ring{
  width:72px; height:72px; border-radius:50%;
  border:6px solid rgba(255,255,255,.18);
  border-top-color:#e6e6e6;
  animation: jarvis-spin 900ms linear infinite;
}
@keyframes jarvis-spin{ to{ transform: rotate(360deg); } }

/* Dim buttons while loading (optional) */
.is-loading{ pointer-events:none; opacity:.65; }

/* ===== Footer block from base.html ===== */
.jx-footer{
  margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.jx-footer .footer-inner{
  width: min(1100px, 92vw); margin: 0 auto; padding: 18px 10px 24px;
  display: grid; gap: 16px;
  grid-template-columns: 1.3fr 1fr 1fr;
}
@media (max-width: 900px){
  .jx-footer .footer-inner{ grid-template-columns: 1fr; }
}
.jx-footer .nav-brand{
  display:flex; align-items:center; gap:10px;
}
.jx-footer .nav-brand img{ height: 26px; width: 26px; }
.jx-footer .brand-title{ font-weight: 800; letter-spacing: .2px; }
.jx-footer h4{ margin: 6px 0 8px; font-size: 14px; color:#e6e7ea; }
.jx-footer a{ color:#d9dbe0; text-decoration:none; }
.jx-footer a:hover{ color:#fff; text-decoration:underline; }
.jx-footer .copyright{ grid-column: 1 / -1; margin-top: 8px; font-size: 13px; }

/* --- Navbar stability hardening --- */
#topnav{ height:auto !important; }                         /* no fixed bar height */
.navbar .row{ display:flex; align-items:center;
              justify-content:space-between;
              flex-wrap: nowrap !important; }              /* keep brand + CTAs on one line */

/* NEW: avoid clipping dropdowns and accidental overlay coverage */
.navbar .container{ overflow: visible !important; }

.nav-right{ display:flex !important; flex-direction:row !important;
            align-items:center !important; gap:12px; flex-wrap:nowrap !important; }

.nav-cta.btn{ display:inline-flex !important; height:auto !important;
              padding:12px 18px !important; white-space:nowrap; }

.navlinks a{ display:inline-flex !important; }              /* ensure anchors don’t become block */

/* NEW: dropdown visibility helper (in case inline CSS is removed) */
.dropdown.open .dropdown-menu{ display:block; z-index:1000; }

/* Mobile: allow wrapping below brand, nicely spaced */
@media (max-width: 860px){
  .navbar .row{ flex-wrap: wrap !important; }
  .nav-right{ margin-top:8px; flex-wrap:wrap !important; }
}

/* Page spacing */
.jx-hero.hero {
  margin-top: 0;                /* kill big top gap */
  padding-top: 12px;
}

/* Grid layout (docs) */
.docs-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: start;           /* prevents vertical centering overlap */
  margin-top: 12px;
}

/* Sidebar (docs) */
.docs-sidebar {
  position: sticky;
  top: calc(var(--navH, 64px) + 12px); /* if you have a fixed header; adjust if not */
  height: max-content;
  z-index: 1;                   /* ensure it doesn't sit under cards */
}

/* Utility */
.wfull { display: block; width: 100%; margin-bottom: 8px; }

/* Neutralize reveal transforms in docs to avoid overlap */
.docs-grid .will-reveal,
.docs-body .will-reveal,
.jx-hero.hero.will-reveal {
  transform: none !important;
  opacity: 1 !important;
}

/* Cards shouldn’t stack borders and shadows when adjacent */
.docs-body .card + .card { margin-top: 14px; }

/* Make sure the main content can shrink without overflow pushing the sidebar */
.docs-body { min-width: 0; }

/* ================== Modals (moved from inline to CSS for stability) ================== */
.jx-modal[hidden]{ display:none !important; }
.jx-modal{
  --accent: #ffd84d;
  --accent-border: rgba(255,216,77,.40);
  --accent-weak: rgba(255,216,77,.10);
  --accent-weak-2: rgba(255,216,77,.06);
  position: fixed; inset: 0; z-index: 1200;
}
.jx-modal.is-csv{
  --accent: #ffdf5c;
  --accent-border: rgba(255,223,92,.50);
  --accent-weak: rgba(255,223,92,.18);
  --accent-weak-2: rgba(255,223,92,.10);
}
.jx-modal.is-zip{
  --accent: #ffd137;
  --accent-border: rgba(255,209,55,.50);
  --accent-weak: rgba(255,209,55,.18);
  --accent-weak-2: rgba(255,209,55,.10);
}
.jx-modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  backdrop-filter:saturate(110%) blur(2px);
}
.jx-modal__panel{
  position:relative; width:min(980px, 92vw); margin:6vh auto; padding:0;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  outline: none;
  animation: jxFadeIn .40s ease-out;
}
@keyframes jxFadeIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .jx-modal__panel{ animation:none; } }

.jx-modal__header, .jx-modal__footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06);
}
.jx-modal__footer{ border-top:1px solid rgba(255,255,255,.06); border-bottom:0; }
.jx-close{ line-height:1; padding:8px 10px; }

.jx-tabs{ display:flex; justify-content:center; padding:10px 12px; }
.jx-tabgroup{ display:inline-flex; border-radius:12px; overflow:hidden; }
.jx-tab{
  padding:10px 16px; font-weight:800; cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background: transparent;
  line-height:1;
}
.jx-tab + .jx-tab{ border-left-width:0; }
.jx-tab:first-child{ border-radius:12px 0 0 12px; }
.jx-tab:last-child{ border-radius:0 12px 12px 0; }

.jx-tab--csv{ background: rgba(255,223,92,.08); border-color: rgba(255,223,92,.30); }
.jx-tab--csv.is-active{ background: rgba(255,223,92,.22); border-color: rgba(255,223,92,.55); }
.jx-tab--zip{ background: rgba(255,209,55,.08); border-color: rgba(255,209,55,.30); }
.jx-tab--zip.is-active{ background: rgba(255,209,55,.22); border-color: rgba(255,209,55,.55); }

.jx-tabpanel{ display:none; padding:16px; }
.jx-tabpanel.is-active{ display:block; }

/* CSV/ZIP illustrations (kept minimal here) */
.ok-badge{
  display:inline-block; margin-top:10px; font-weight:800;
  border:1px solid var(--accent-border);
  background:linear-gradient(180deg, var(--accent-weak), rgba(86,255,122,.12));
  padding:6px 10px; border-radius:999px;
}
/* ===== Mobile nav collapse ===== */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:#e9eaec;
  cursor:pointer;
}

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }

  /* collapse nav-right on mobile until opened */
  #jxNavLinks.navlinks{
    display:none !important;
    width:100%;
    margin-top:10px;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  #jxNavLinks.navlinks.open{
    display:flex !important;
  }

  /* Make pills/buttons full width for thumb use */
  #jxNavLinks .status-pill,
  #jxNavLinks .btn,
  #jxNavLinks a.btn{
    width:100%;
    justify-content:center;
  }

  /* dropdown should stretch nicely */
  #jxNavLinks .dropdown{ width:100%; }
  #jxNavLinks .dropdown-menu{ width:100%; }
}
/* Prevent iOS zoom and improve touch targets */
input, select, textarea, button{
  font-size:16px;
}

@media (max-width: 860px){
  .btn{ padding:12px 14px; border-radius:14px; }
  .select, .textarea, .file-input, input{ padding:12px 12px; }
}
/* ===== Responsive tables ===== */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
.table-wrap table{
  min-width: 720px; /* keeps columns readable; user can scroll horizontally */
}
/* ===== Responsive code blocks ===== */
pre{
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
/* ===== Footer layout ===== */
.jx-footer{ margin-top:32px; }
.jx-footer .footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  align-items:start;
}

@media (max-width: 860px){
  .jx-footer .footer-inner{
    grid-template-columns:1fr;
  }
  .jx-footer .copyright{
    padding: 0 16px;
  }
}