:root {
  --bg:#f5f4f0; --s:#fff; --s2:#f9f8f5; --bd:#e8e6e0; --bd2:#f0ede6;
  --tx:#1a1a1a; --tx2:#555; --tx3:#999;
  --ac:#c0392b; --acl:#fdf2f1;
  --gn:#1a7a4a; --gnl:#f0faf4;
  --am:#b08d00; --aml:#fdf8e6;
  --bl:#1a5c9a; --bll:#eef4fd;
  --pp:#6b3fa0; --ppl:#f3eeff;
  --r:10px; --r2:6px;
  --sh:0 2px 8px rgba(0,0,0,.07);
  --sh2:0 4px 20px rgba(0,0,0,.12);
}
/* nav-logo is a transparent PNG — no dark mode filter needed */
[data-theme="dark"] {
  --bg:#111113; --s:#1c1c1f; --s2:#161618; --bd:#2e2e33; --bd2:#232328;
  --tx:#e5e4e1; --tx2:#909090; --tx3:#555;
  --ac:#e05244; --acl:#2c1512;
  --gn:#2eb870; --gnl:#0c2218;
  --am:#d4aa28; --aml:#251d08;
  --bl:#4a96e8; --bll:#0d1e34;
  --pp:#a97de8; --ppl:#1b0e32;
  --sh:0 2px 8px rgba(0,0,0,.4);
  --sh2:0 4px 20px rgba(0,0,0,.6);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--tx); font-size: 15px; min-height: 100vh; overflow-y: scroll; overflow-x: hidden; -webkit-text-size-adjust: 100%; touch-action: manipulation; }

/* ── APP WRAPPER ────────────────────────────────────────── */
#app { display: none; flex-direction: column; min-height: 100vh; }

/* ── NAV ───────────────────────────────────────────────── */
.nav { background: var(--s); border-bottom: 1px solid var(--bd); padding: 0 24px; display: flex; align-items: center; gap: 0; position: sticky; top: 0; z-index: 100; height: 56px; }
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: 24px; text-decoration: none; }
.nav-logo { height: 32px; width: auto; display: block; }
.nav-title { font-weight: 600; font-size: 16px; color: var(--tx); }
.nav-sub { font-size: 12px; color: var(--tx3); font-weight: 400; }
.nav-tabs { display: flex; gap: 0; flex: 1; }
.ntab { padding: 0 16px; height: 56px; display: flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--tx2); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; white-space: nowrap; }
.ntab:hover { color: var(--tx); background: var(--bg); }
.ntab.active { color: var(--ac); border-bottom-color: var(--ac); }
.nav-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-user { font-size: 13px; color: var(--tx3); margin-right: auto; padding-right: 8px; }
.nav-cal { display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--bg); border:1px solid var(--bd); border-radius:5px; width:32px; min-width:32px; height:30px; overflow:hidden; cursor:default; user-select:none; }
.nav-cal-day { font-weight:700; font-size:13px; color:var(--tx); line-height:1; }
.nav-cal-mon { background:var(--ac); color:#fff; font-size:9px; font-weight:600; text-transform:uppercase; width:100%; text-align:center; padding:1px 0; letter-spacing:0.5px; }
.nav-icon-btn { padding:0 !important; min-width:32px !important; width:32px; min-height:30px !important; justify-content:center; font-size:16px; }

/* FY tabs */
.fytab { padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--tx2); border: none; background: transparent; font-family: inherit; transition: all .15s; }
.fytab.on { background: var(--s); color: var(--tx); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ── PAGES ─────────────────────────────────────────────── */
.page { display: none; padding: 24px; max-width: 1400px; width: 100%; margin: 0 auto; }
.page.active { display: block; }

/* ── PAGE HEADER ───────────────────────────────────────── */
.ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ph-left h1 { font-size: 22px; font-weight: 700; }
.ph-left p { font-size: 14px; color: var(--tx2); margin-top: 2px; }

/* ── GRIDS ─────────────────────────────────────────────── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* ── NAV HAMBURGER ─────────────────────────────────────── */
.nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; color: var(--tx2); font-size: 22px; line-height: 1; border-radius: 4px; margin-left: 8px; }
.nav-toggle:hover { background: var(--bg); color: var(--tx); }

/* ── PIPELINE ───────────────────────────────────────────── */
.pipe-equip-sub { display: none; font-size: 11px; color: var(--tx3); font-weight: 400; margin-top: 2px; }

/* Job/ref number cells in tables — monospace, bold, red, never wrap */
.pcard-no { font-family: monospace; font-weight: 700; color: var(--ac); white-space: nowrap; font-size: 12px; }

/* Mobile-only equipment sub-text (shown under customer in list views) */
.mob-equip { display: none; }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 900px) {
  .pipe-row { grid-template-columns: 80px 1fr 1fr 90px; }
  .pipe-row > span:last-child { display: none; }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .fg { grid-template-columns: 1fr; }
  .fg .full { grid-column: 1; }
  .g3, .g4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* Nav becomes a collapsible drawer */
  .nav { flex-wrap: wrap; height: auto; min-height: 56px; padding: 0 12px; }
  .nav-brand { flex: 1; }
  .nav-toggle { display: flex; align-items: center; }
  .nav-tabs {
    display: none;
    order: 10;
    width: 100%;
    flex-direction: column;
    padding: 4px 0 8px;
    border-top: 1px solid var(--bd);
  }
  .nav-tabs.open { display: flex; }
  .ntab { height: 48px; padding: 0 16px; font-size: 15px; border-bottom: none; border-left: 3px solid transparent; justify-content: flex-start; }
  .ntab.active { border-bottom-color: transparent; border-left-color: var(--ac); background: var(--acl); }
  .nav-right { display: none; }

  /* Page header stacks on mobile */
  .ph { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ph .btn, .ph button { align-self: flex-start; }
}

@media (max-width: 600px) {
  .page { padding: 12px; overflow-x: hidden; }
  /* Pipeline: 2-col layout — job no + customer+equip sub */
  .pipe-row { grid-template-columns: 80px 1fr; }
  .pipe-row-equip, .pipe-row-est + span { display: none; }
  .pipe-row-est { display: none; }
  .pipe-row-no { white-space: nowrap; }
  /* Truncate equipment sub-text to single line */
  .pipe-equip-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Hide less-important table columns on mobile */
  .mob-hide { display: none !important; }
  /* Equipment sub-text under customer name in list views */
  .mob-equip { display: block; font-size: 11px; color: var(--tx2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .fbar { flex-wrap: wrap; gap: 8px; }
  .fbar .finput, .fbar .fsel { flex: 1 1 140px; min-width: 140px; }
  .ph-left h1 { font-size: 19px; }
}