/* ==========================================================================
   Smart-Metrolac — main.css
   Custom styles layered on top of Tailwind (config in assets/js/tailwind-config.js)
   ========================================================================== */

html { scroll-behavior: smooth; }

body { overscroll-behavior: none; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f0eded; }
::-webkit-scrollbar-thumb { background: #819986; border-radius: 4px; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Placeholder boxes for assets not yet uploaded ── */
.placeholder-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(135deg, #f0eded, #f0eded 10px, #e5e2e1 10px, #e5e2e1 20px);
  border: 1.5px dashed #737973; border-radius: .5rem; text-align: center; padding: 24px;
}
.placeholder-box .material-symbols-outlined { font-size: 32px; color: #737973; }

/* ── Hero background video + Ken Burns fallback ── */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media video.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}
.hero-media img.hero-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1%, -2%); }
}

/* ── Generic fade/slide-in (fallback if AOS hasn't loaded yet) ── */
.fade-in { animation: fadeIn .8s cubic-bezier(.16,1,.3,1) forwards; opacity: 0; transform: translateY(16px); }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

/* ── Dashboard tabs ── */
.tab-btn { transition: all .2s ease; }
.tab-btn.active { background: #061b0e; color: #fff; }
.dash-panel { transition: opacity .4s ease; }

/* ── Measurement flow stepper ── */
.flow-track {
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px;
}
.flow-track::before {
  content: '';
  position: absolute; top: 28px; left: 5%; right: 5%; height: 2px;
  background: repeating-linear-gradient(90deg, #3ca1a0 0 8px, transparent 8px 16px);
  background-size: 200% 100%;
  animation: flow-dash 3s linear infinite;
}
@keyframes flow-dash { from { background-position: 0 0; } to { background-position: -32px 0; } }
.flow-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 15%; text-align: center;
}
.flow-step .flow-dot {
  width: 56px; height: 56px; border-radius: 9999px;
  background: #fcf9f8; border: 2px solid #1b3022;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(6,27,14,0.12);
  transition: transform .3s ease, background .3s ease;
}
.flow-step:hover .flow-dot { transform: scale(1.08); background: #1b3022; }
.flow-step:hover .flow-dot .material-symbols-outlined { color: #fff; }

/* ── Animated counters ── */
.counter { font-variant-numeric: tabular-nums; }

/* ── Card hover lift ── */
.lift-card { transition: transform .3s ease, box-shadow .3s ease; }
.lift-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(6,27,14,0.10); }

/* ── Nav link underline sweep ── */
.nav-link-underline { position: relative; }
.nav-link-underline::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: currentColor; transition: width .25s ease;
}
.nav-link-underline:hover::after { width: 100%; }

@media (max-width: 768px) {
  .flow-track { flex-direction: column; align-items: stretch; gap: 20px; }
  .flow-track::before { display: none; }
  .flow-step { width: 100%; flex-direction: row; text-align: left; }
}

/* ── Architecture diagram (native, replaces system-architecture.png) ── */
.tier-panel { border-radius: .75rem; overflow: hidden; border: 1px solid #c3c8c1; background: #ffffff; }
.tier-header {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; font-size: 13px; color: #fff;
}
.tier-header.hw { background: #061b0e; }
.tier-header.be { background: #003131; }
.tier-header.fe { background: #1b3022; }
.tier-body { padding: 24px; }

.connector-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 4px 0; }
.connector-line { width: 2px; height: 22px; background: #737973; }
.connector-arrow {
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid #737973;
}
.connector-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: center;
  color: #434843; background: #f0eded; border: 1px solid #c3c8c1; border-radius: 9999px;
  padding: 4px 12px; margin: 6px 0; max-width: 320px;
}

.hub-box {
  border-radius: .5rem; padding: 12px 20px; text-align: center;
  font-family: 'Inter', sans-serif; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* ── Measurement flow timeline (native, replaces data-flow.png) ── */
.timeline { position: relative; padding-left: 44px; }
.timeline::before { content: ''; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: #c3c8c1; }
.timeline-item { position: relative; padding-bottom: 22px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: -44px; top: 0; width: 36px; height: 36px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 14px; color: #fff; z-index: 1;
}
.timeline-item.part1 .timeline-dot { background: #061b0e; }
.timeline-item.part2 .timeline-dot { background: #1b3022; border: 2px solid #3ca1a0; }
.detail-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: #e9e2d3; border-radius: 9999px; padding: 3px 10px; margin-top: 6px; color: #4b463c;
}
.alert-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: #ffdad6; border-radius: 9999px; padding: 3px 10px; margin-top: 6px; color: #93000a;
}

/* ── Budget (native, replaces budget.png) ── */
.budget-category {
  border-radius: .5rem; border: 1px solid #c3c8c1; overflow: hidden; background: #fff;
}
.budget-category-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: #f6f3f2; border-bottom: 1px solid #c3c8c1;
}
.budget-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 18px; border-bottom: 1px solid #eae7e7; gap: 12px;
}
.budget-row:last-child { border-bottom: none; }
.budget-total-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: #061b0e; color: #fff; border-radius: .5rem; padding: 18px 24px;
}