/* static/styles.css */
/* =========================================================
   Bridgeworks Collective — Core Styles
   ========================================================= */

/* ---------- CSS Variables ---------- */
:root{
  --bg: #0b1020;
  --bg-soft: #0f172a;
  --panel: #111827;
  --panel-line: #233047;

  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #00d1b2;
  --accent-2: #22c55e;
  --accent-3: #14b8a6;

  --warning: #f59e0b;
  --danger:  #ef4444;
  --ok:      #10b981;

  --radius: 12px;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
  --line: 1px solid var(--panel-line);
}

/* ---------- Reset-ish ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
  overflow-x:hidden; /* kill stray horizontal scroll on mobile */
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
.hidden{ display:none !important; }

/* ---------- Utilities ---------- */
.container{ max-width:1100px; margin:0 auto; padding:0 1rem; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:10px; font-weight:700;
  cursor:pointer; border:var(--line); text-decoration:none;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.25); text-decoration:none; }
.btn.primary{ background:var(--accent); color:#0b0f1a; border-color:transparent; }
.btn.primary:hover{ filter:brightness(1.08); }
.btn.secondary{ background:#0b1220; color:var(--text); }

/* =========================================================
   NAV
   ========================================================= */
header.nav{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(6px);
  background:linear-gradient(180deg, rgba(11,16,32,.9), rgba(11,16,32,.55) 70%, transparent);
  border-bottom:var(--line);
}
.nav-container{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.6rem 1rem; max-width:1100px; margin:0 auto; width:100%;
}
.nav-logo{ height:36px; width:auto; }
.brand{ font-weight:600; }

.nav-toggle{
  display:none; width:44px; height:44px; border:var(--line); border-radius:10px;
  background:#0b1220; color:var(--text); cursor:pointer; position:relative; flex:0 0 44px;
}
.hamburger, .hamburger::before, .hamburger::after{
  content:""; display:block; position:absolute; left:10px; right:10px; height:2px; background:var(--text);
  transition:transform .25s ease, opacity .2s ease;
}
.hamburger{ top:50%; transform:translateY(-50%); }
.hamburger::before{ top:-8px; }
.hamburger::after{ top:8px; }
.nav-toggle.active .hamburger{ opacity:0; }
.nav-toggle.active .hamburger::before{ transform:translateY(8px) rotate(45deg); }
.nav-toggle.active .hamburger::after{ transform:translateY(-8px) rotate(-45deg); }

.nav-menu{
  display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0;
}
.nav-menu a{
  display:block; padding:.5rem .6rem; border-radius:8px; color:var(--text);
  transition:background .15s ease, color .15s ease;
}
.nav-menu a:hover{ background:#0f1a33; }

/* Mobile nav */
@media (max-width: 860px){
  .nav-toggle{ display:inline-block; }
  .nav-menu{
    position:absolute; top:64px; left:0; right:0;
    background:rgba(12,16,32,.98); border-bottom:var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav-menu.active{ max-height:60vh; }
  .nav-menu li{ border-top:var(--line); }
  .nav-menu a{ padding:1rem; }
  body.nav-open{ overflow:hidden; } /* lock scroll when menu open */
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  border-top:var(--line);
  padding:2rem 1rem; text-align:center; background:linear-gradient(0deg, #0b0f1a, transparent 60%);
  color:var(--muted);
}

/* =========================================================
   CONTENT BASICS
   ========================================================= */
main{ min-height:60vh; }
h1,h2,h3{ line-height:1.25; margin:0 0 .6rem; }
h1{ font-size:clamp(1.6rem, 2.5vw, 2.1rem); }
h2{ font-size:clamp(1.2rem, 2vw, 1.5rem); color:var(--accent); }
p{ margin:.6rem 0; color:var(--text); }
.muted{ color:var(--muted); }

/* =========================================================
   TABLES (generic)
   ========================================================= */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px; }
table{ width:100%; border-collapse:collapse; }
th, td{ border:var(--line); padding:.6rem .7rem; vertical-align:top; }
th{ background:#162033; color:var(--text); text-align:left; }
tr:nth-child(even) td{ background:rgba(255,255,255,0.01); }

/* =========================================================
   CONSTRUCTION TRACKER PAGE
   ========================================================= */
.construction-tracker-page .header{
  margin:1rem 0 1.5rem; padding:1rem;
  background:var(--panel); color:var(--text); border:var(--line); border-radius:var(--radius);
}
.construction-tracker-page .meta{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:.75rem; margin-top:.5rem; font-size:.95rem;
}
.construction-tracker-page .meta > div{
  background:#0b1220; border:var(--line); border-radius:10px; padding:.75rem;
}
.box{
  background:var(--bg-soft); border:var(--line); border-radius:14px; padding:1rem; color:var(--text);
}
.badge{
  display:inline-block; padding:.25rem .6rem; border-radius:999px; border:1px solid var(--panel-line);
  background:#0b1220; color:#cbd5e1; font-size:.8rem;
}
.construction-tracker-page table{ font-size:.95rem; }
.construction-tracker-page th, .construction-tracker-page td{ border:var(--line); }

/* Plot areas */
#gantt, #timeline, #gantt-chart, #fullscreen-gantt-chart{
  background:#0f172a; border:var(--line); border-radius:12px;
}