/* app-fonts.css v40 — admin-style sidebar on tech.html only; portal/signin/index keep dark landing pages.
   admin.html is untouched. This file is scoped to tech via body:has(#bottom-nav). */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* Universal font for every page that links this stylesheet */
html, body, input, button, select, textarea, label, a, div, span, p,
h1, h2, h3, h4, h5, h6, .btn, .card, .panel, nav, aside, section, article, table, th, td {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0; }

/* Tech-only html bg (light) so no dark edges show around the light content */
html:has(body #bottom-nav) { background: #f4f5f7 !important; }

/* Footer color (portal/index/tech) — white on dark surfaces. Was #dd9933
   (gold), but on the public landing's black background the gold rendered as
   near-invisible dim grey at the small footer size. White wins on every
   dark surface (portal, index, tech). The !important is intentional: the
   page-local .footer-text rule has no !important and was previously being
   overridden silently by this declaration. */
.footer-text, #footer-text {
  color: #ffffff !important; font-size: 13px !important; opacity: 1 !important;
  font-weight: 500 !important; padding: 16px 0 12px !important; text-align: center;
  white-space: nowrap !important;
}

/* Portal/Index: align the fixed copyright with .content-block. content-block
   sits inside .left-panel (left half of a max-1280-centered 2-column grid,
   padding 30px 40px, gap 30px), right-anchored with max-width 440px. So:
     - footer right edge = left-panel right edge = viewport-center + half-gap
     - footer width      = min(440px, calc(50% - 55px))   — same constraint
                           applied to .content-block
     - text-align: left  — visible glyph left edge equals .content-block.x
   This rule is the cascade winner for index/portal because the body:has(...)
   chain has higher specificity than the page-local .footer-text rule. */
@media (min-width: 769px) {
  body:has(#signin-cta-btn):has(#slides-container) .footer-text,
  body:has(#signin-cta-btn):has(#slides-container) #footer-text {
    left: auto !important;
    right: calc(50% + 15px) !important;
    width: min(440px, calc(50% - 55px)) !important;
    text-align: left !important;
    /* Safety guard at narrow desktop widths (1024–1440): the base rule's
       white-space:nowrap means a text run wider than the declared box can
       paint past the right edge into the right-column slideshow. Clip
       overflow so even pixel-overshoot stays contained. box-sizing keeps
       the declared width inclusive of any padding the base rule adds. */
    overflow: hidden !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
  }
}

/* Portal/Index mobile: the desktop nowrap forces the copyright onto a single
   long line that overflows narrow viewports. On mobile (≤768) allow wrap,
   shrink the font, keep left edge aligned with .content-block (which on
   mobile sits inside .left-panel's 24px horizontal padding). The mobile
   layout stays 2-column (slideshow on the right), so anchor the right edge
   at the column boundary minus a 24px gap — never bleeds into the photo. */
@media (max-width: 768px) {
  body:has(#signin-cta-btn):has(#slides-container) .footer-text,
  body:has(#signin-cta-btn):has(#slides-container) #footer-text {
    left: 24px !important;
    right: calc(50% + 24px) !important;
    width: auto !important;
    text-align: left !important;
    white-space: normal !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    padding: 10px 0 8px !important;
  }
}

/* ===========================================================
   TECH PAGE base (all viewports) — light cards, input bg, etc
   =========================================================== */
body:has(#bottom-nav) h1,
body:has(#bottom-nav) h2,
body:has(#bottom-nav) h3 { color: #1e2330 !important; }

body:has(#bottom-nav) input,
body:has(#bottom-nav) select,
body:has(#bottom-nav) textarea {
  background: #ffffff !important; color: #1e2330 !important;
  border: 1px solid #e2e5ea !important;
}
body:has(#bottom-nav) label,
body:has(#bottom-nav) .label { color: #4b5563 !important; font-weight: 600; }

body:has(#bottom-nav) .card,
body:has(#bottom-nav) .panel {
  background: #ffffff !important; color: #1e2330 !important;
  border: 1px solid #e2e5ea !important; border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}

body:has(#bottom-nav) .status-btn,
body:has(#bottom-nav) .mode-btn,
body:has(#bottom-nav) .tab-btn {
  color: #4b5563 !important; border: 1px solid #d1d5db !important;
  background: #ffffff !important; font-weight: 600 !important;
}
body:has(#bottom-nav) .mode-btn.active,
body:has(#bottom-nav) .tab-btn.active {
  color: #dd9933 !important; background: #fff7ec !important; border-color: #dd9933 !important;
}
body:has(#bottom-nav) .status-btn.completed,
body:has(#bottom-nav) .status-btn.done {
  color: #ffffff !important; background: #16a34a !important; border-color: #16a34a !important;
}

/* Projects screen: single white wrap with soft-gray inner cards */
body:has(#bottom-nav) #screen-projects {
  background: #ffffff !important;
  border: 1px solid #e2e5ea !important;
  border-radius: 12px !important;
  padding: 24px 20px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}
body:has(#bottom-nav) #screen-projects .pm-proj-card,
body:has(#bottom-nav) #screen-projects .project-card {
  background: #f9fafb !important; border: 1px solid #e2e5ea !important;
  border-radius: 8px !important; box-shadow: none !important;
}
body:has(#bottom-nav) #screen-projects .stat-card,
body:has(#bottom-nav) #screen-projects .kpi-card {
  background: #f9fafb !important; border: 1px solid #e2e5ea !important;
  border-radius: 10px !important; box-shadow: none !important;
}

/* ===========================================================
   TECH DESKTOP (>=1024px) — admin-style navy sidebar + cards
   =========================================================== */
@media (min-width: 1024px) {
  body:has(#bottom-nav) { padding-left: 0 !important; }
  body:has(#bottom-nav)::before {
    content: ""; position: fixed; left: 0; top: 0; bottom: 0;
    width: 220px; background: #111827;
    border-right: 1px solid rgba(255,255,255,0.08);
    z-index: 1; pointer-events: none;
  }
  /* Promote tech-brand (contains #tech-sb-user) above the navy backdrop.
     #tech-brand sits at fixed top:0 in the sidebar column. Its .brand-row
     duplicates the brand already rendered by #app-header, so hide it;
     .brand-user duplicates the sidebar user card so hide that too. */
  body:has(#bottom-nav) #tech-brand {
    z-index: 45 !important;
    background: transparent !important;
    top: 56px !important;  /* leave room for #app-header brand above */
    height: auto !important;
  }
  body:has(#bottom-nav) #tech-brand .brand-row {
    display: none !important;
  }
  body:has(#bottom-nav) #tech-brand * {
    color: #ffffff !important;
  }

  /* Header → sidebar top column */
  body:has(#bottom-nav) #app-header {
    position: fixed !important; left: 0 !important; top: 0 !important;
    width: 220px !important; height: auto !important; bottom: auto !important;
    background: transparent !important; color: #e5e7eb !important;
    padding: 14px 14px 10px !important; border: none !important; box-shadow: none !important;
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 10px !important;
    z-index: 50 !important;
  }
  body:has(#bottom-nav) #app-header .brand {
    width: 100% !important; padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
  }
  body:has(#bottom-nav) #app-header .brand * { color: #ffffff !important; }
  body:has(#bottom-nav) #app-header .brand .brand-sub,
  body:has(#bottom-nav) #app-header .brand svg { display: none !important; }
  body:has(#bottom-nav) #app-header .brand img {
    display: block !important;
    width: auto !important;
    max-width: 150px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
  body:has(#bottom-nav) #app-header .brand-logo-old,
  body:has(#bottom-nav) #app-header .brand-box {
    display: flex !important; width: 36px !important; height: 36px !important;
    background: #dd9933 !important; color: #111827 !important; border-radius: 8px !important;
    align-items: center !important; justify-content: center !important;
    font-weight: 800 !important; font-size: 0.95rem !important;
  }

  /* Admin-style user card injected by tech-profile-v1 patch: #tech-sb-user */
  body:has(#bottom-nav) #tech-sb-user {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 2px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    background: transparent !important;
  }
  body:has(#bottom-nav) #tech-sb-user .sb-avatar {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    background-color: #dd9933 !important;
    color: #111827 !important;
    font-weight: 800 !important; font-size: 0.9rem !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex: 0 0 36px !important;
    text-transform: uppercase !important;
    background-size: cover !important;
    background-position: center !important;
  }
  body:has(#bottom-nav) #tech-sb-user .sb-avatar[style*="background-image"] {
    color: transparent !important;
  }
  body:has(#bottom-nav) #tech-sb-user .sb-user-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  body:has(#bottom-nav) #tech-sb-user .sb-user-name {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.86rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body:has(#bottom-nav) #tech-sb-user .sb-user-role {
    color: rgba(255,255,255,0.45) !important;
    font-weight: 500 !important;
    font-size: 0.7rem !important;
  }
  body:has(#bottom-nav) #tech-sb-user .sb-out-btn {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.2px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  body:has(#bottom-nav) #tech-sb-user .sb-out-btn:hover {
    border-color: #dd9933 !important;
    color: #dd9933 !important;
  }

  /* Hide duplicates on desktop: user-pill, top-right chrome, brand-user line
     (#tech-brand-user lives outside #app-header — dropped prefix) */
  body:has(#bottom-nav) #app-header #user-pill,
  body:has(#bottom-nav) #app-header .user-pill,
  body:has(#bottom-nav) #tech-brand-user,
  body:has(#bottom-nav) .brand-user,
  body:has(#bottom-nav) #app-header .lang-toggle,
  body:has(#bottom-nav) #app-header #lang-toggle-btn,
  body:has(#bottom-nav) #app-header #top-user-chip,
  body:has(#bottom-nav) #app-header a[href="/"] {
    display: none !important;
  }

  /* MAIN label */
  body:has(#bottom-nav) #sb-main-label {
    position: fixed !important; left: 0 !important; top: 156px !important;
    width: 220px !important; padding: 0 24px !important;
    font-size: 0.7rem !important; letter-spacing: 1.5px !important;
    text-transform: uppercase !important; color: #6b7280 !important;
    font-weight: 600 !important; z-index: 50 !important;
  }

  /* Bottom-nav → vertical sidebar nav */
  body:has(#bottom-nav) #bottom-nav {
    position: fixed !important; left: 0 !important; top: 180px !important;
    right: auto !important; bottom: auto !important;
    width: 220px !important; height: auto !important;
    background: transparent !important; border: none !important;
    padding: 4px 10px 10px !important; gap: 4px !important;
    flex-direction: column !important; z-index: 50 !important;
  }
  body:has(#bottom-nav) #bottom-nav .nav-btn {
    width: 100% !important; justify-content: flex-start !important;
    padding: 10px 12px !important; color: #e5e7eb !important;
    background: transparent !important; border: none !important;
    border-radius: 8px !important; font-size: 0.88rem !important; font-weight: 500 !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
    cursor: pointer !important; text-align: left !important;
  }
  body:has(#bottom-nav) #bottom-nav .nav-btn.active {
    background: rgba(221,153,51,0.15) !important; color: #dd9933 !important;
  }
  body:has(#bottom-nav) #bottom-nav .nav-btn:hover {
    background: rgba(255,255,255,0.05) !important;
  }

  /* Keep the tech theme switch accessible, but away from the profile block. */
  body:has(#bottom-nav) #app-header .eg-theme-toggle {
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    top: auto !important;
    bottom: 24px !important;
    width: 196px !important;
    min-height: 42px !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    background: rgba(15, 23, 42, 0.88) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #e5e7eb !important;
    box-shadow: none !important;
    z-index: 80 !important;
  }
  body:has(#bottom-nav) #app-header .eg-theme-toggle:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(221,153,51,0.46) !important;
    color: #dd9933 !important;
  }
  body:has(#bottom-nav) #app-header .eg-theme-toggle-dot {
    width: 18px !important;
    height: 18px !important;
    background: linear-gradient(135deg, #f8fafc, #dd9933) !important;
  }

  /* Main content pushed right of the sidebar */
  body:has(#bottom-nav) main {
    margin-left: 220px !important; padding: 24px !important;
    max-width: none !important; width: auto !important;
  }
}

/* ===========================================================
   TECH MOBILE (<1024px) — compact top bar + bottom nav + Tesla-gap fix
   =========================================================== */
@media (max-width: 1023px) {
  :root { --bn-h: 80px; }

  /* Main content padding so last card clears the fixed bottom nav */
  body:has(#bottom-nav) main {
    margin: 0 !important;
    padding: 16px 12px calc(var(--bn-h) + env(safe-area-inset-bottom, 0px) + 32px) !important;
    width: 100% !important; max-width: 100% !important;
    overflow: visible !important; height: auto !important; max-height: none !important;
  }
  body:has(#bottom-nav) #screen-projects,
  body:has(#bottom-nav) .screen,
  body:has(#bottom-nav) .screen > .list,
  body:has(#bottom-nav) .screen > .cards {
    padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px) + 24px) !important;
    box-sizing: border-box;
  }
  body:has(#bottom-nav) #screen-projects > *:last-child,
  body:has(#bottom-nav) .screen > *:last-child {
    margin-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }
  html:has(body:has(#bottom-nav)) {
    scroll-padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  body:has(#bottom-nav) .screen,
  body.tech-logged-in .screen { margin-left: 0 !important; }

  /* Hide the desktop sidebar user card + MAIN label on mobile.
     #tech-brand-user lives outside #app-header, so drop that prefix. */
  body:has(#bottom-nav) #tech-sb-user,
  body:has(#bottom-nav) #sb-main-label,
  body:has(#bottom-nav) #tech-brand-user,
  body:has(#bottom-nav) .brand-user {
    display: none !important;
  }

  /* Collapse <main> when it contains no visible screen — fixes the big
     empty gap at the top of Projects / dashboard screens that live OUTSIDE
     <main> (at body level). main still holds the login/entry/history/etc
     screens, so only collapse when NONE of its screens is .active. */
  body:has(#bottom-nav) main:not(:has(.screen.active)) {
    display: none !important;
  }

  /* Compact navy top bar */
  body:has(#bottom-nav) #app-header {
    position: sticky !important; top: 0 !important;
    left: 0 !important; right: 0 !important; width: 100% !important;
    height: auto !important; min-height: 52px !important;
    padding: 10px 14px !important;
    background: #111827 !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 60 !important;
    flex-wrap: nowrap !important;
  }
  body:has(#bottom-nav) #app-header .brand {
    display: flex !important; align-items: center !important; gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  body:has(#bottom-nav) #app-header .brand * { color: #ffffff !important; }
  body:has(#bottom-nav) #app-header .brand img {
    display: block !important;
    width: auto !important;
    max-width: 128px !important;
    max-height: 30px !important;
    object-fit: contain !important;
  }
  body:has(#bottom-nav) #app-header .brand-logo-old,
  body:has(#bottom-nav) #app-header .brand-box {
    width: 30px !important; height: 30px !important;
    background: #dd9933 !important; color: #111827 !important;
    border-radius: 6px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-weight: 800 !important; font-size: 0.82rem !important;
    flex: 0 0 30px !important;
  }
  body:has(#bottom-nav) #app-header .brand .brand-name {
    font-size: 0.95rem !important; font-weight: 700 !important;
  }
  body:has(#bottom-nav) #app-header .brand .brand-sub {
    display: none !important;
  }

  /* Top-right compact user pill + lang toggle on mobile */
  body:has(#bottom-nav) #app-header #user-pill {
    display: flex !important;
    flex: 0 0 auto !important;
    padding: 4px 10px 4px 4px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 999px !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
    cursor: pointer !important;
  }
  body:has(#bottom-nav) #app-header #user-pill #user-avatar {
    width: 26px !important; height: 26px !important;
    font-size: 0.7rem !important;
    flex: 0 0 26px !important;
    border-radius: 50% !important;
    background: #dd9933 !important; color: #111827 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-weight: 800 !important;
  }
  body:has(#bottom-nav) #app-header #user-pill #user-name-lbl {
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.9) !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body:has(#bottom-nav) #app-header .lang-toggle,
  body:has(#bottom-nav) #app-header #lang-toggle-btn {
    flex: 0 0 auto !important;
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    color: rgba(255,255,255,0.75) !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
  }

  /* Bottom nav bar */
  body:has(#bottom-nav) #bottom-nav {
    position: fixed !important; top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important; width: 100% !important;
    flex-direction: row !important;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important; border-top: 1px solid #e2e5ea !important;
  }
  body:has(#bottom-nav) #bottom-nav .nav-btn {
    flex: 1 !important; flex-direction: column !important;
    padding: 8px 4px !important; gap: 4px !important;
    color: #6b7280 !important; background: transparent !important; border: none !important;
  }
  body:has(#bottom-nav) #bottom-nav .nav-btn.active { color: #dd9933 !important; }
}


/* Same rule on desktop so Projects layout works there too. Also give the
   body-level screens (#screen-projects, #screen-proj-detail) the same
   220px sidebar offset + centered content width that <main> uses, so the
   Projects page lays out identically to Log Hours. Do NOT touch main or
   screens inside main — Log Hours must remain unchanged. */
@media (min-width: 1024px) {
  body:has(#bottom-nav) main:not(:has(.screen.active)) {
    display: none !important;
  }
  body:has(#bottom-nav) > #screen-projects,
  body:has(#bottom-nav) > #screen-proj-detail,
  body:has(#bottom-nav) > #screen-scope-complete {
    margin-left: 220px !important;
    margin-right: auto !important;
    max-width: 1080px !important;
    width: calc(100% - 220px) !important;
    padding: 24px 24px 90px !important;
    box-sizing: border-box !important;
  }
}

/* ===========================================================
   Hour History screen (tech-history.js renders into #screen-history)
   =========================================================== */
body:has(#bottom-nav) #screen-history .history-header {
  margin-bottom: 20px;
}
body:has(#bottom-nav) #screen-history .history-header h2 {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #1e2330 !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.3px;
}
body:has(#bottom-nav) #screen-history .history-period-switcher {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e5ea;
  border-radius: 12px;
  padding: 12px 14px;
}
body:has(#bottom-nav) #screen-history .history-period-btn {
  background: transparent !important;
  border: 1px solid #e2e5ea !important;
  color: #4b5563 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s;
  flex: 0 0 auto;
  white-space: nowrap;
}
body:has(#bottom-nav) #screen-history .history-period-btn:hover:not(:disabled) {
  border-color: #dd9933 !important;
  color: #dd9933 !important;
}
body:has(#bottom-nav) #screen-history .history-period-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
body:has(#bottom-nav) #screen-history .history-period-current {
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}
body:has(#bottom-nav) #screen-history .history-period-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
body:has(#bottom-nav) #screen-history .history-period-range {
  font-size: 1.02rem;
  font-weight: 700;
  color: #1e2330;
  margin-top: 2px;
}
body:has(#bottom-nav) #screen-history .history-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  margin-top: 14px;
}
body:has(#bottom-nav) #screen-history .history-stat {
  background: #ffffff;
  border: 1px solid #e2e5ea;
  border-bottom: 2px solid #dd9933;
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
body:has(#bottom-nav) #screen-history .history-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
body:has(#bottom-nav) #screen-history .history-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1e2330;
  margin-top: 4px;
  line-height: 1;
}
body:has(#bottom-nav) #screen-history .history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body:has(#bottom-nav) #screen-history .history-row {
  background: #ffffff;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 14px;
  align-items: center;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
body:has(#bottom-nav) #screen-history .history-row-date {
  font-size: 0.76rem;
  color: #6b7280;
  font-weight: 600;
}
body:has(#bottom-nav) #screen-history .history-row-main {
  min-width: 0;
}
body:has(#bottom-nav) #screen-history .history-row-project {
  font-weight: 700;
  color: #1e2330;
  font-size: 0.92rem;
}
body:has(#bottom-nav) #screen-history .history-row-notes {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body:has(#bottom-nav) #screen-history .history-row-hours {
  font-weight: 800;
  color: #dd9933;
  font-size: 1rem;
  white-space: nowrap;
}
body:has(#bottom-nav) #screen-history .history-empty {
  background: #ffffff;
  border: 1px dashed #e2e5ea;
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
}
@media (max-width: 600px) {
  body:has(#bottom-nav) #screen-history .history-period-switcher { flex-wrap: wrap; gap: 8px; padding: 10px; }
  body:has(#bottom-nav) #screen-history .history-period-current { order: -1; width: 100%; flex: 1 1 100%; margin-bottom: 4px; }
  body:has(#bottom-nav) #screen-history .history-period-btn { font-size: 0.74rem !important; padding: 7px 12px !important; }
  body:has(#bottom-nav) #screen-history .history-summary { gap: 8px; }
  body:has(#bottom-nav) #screen-history .history-stat { padding: 10px 8px; }
  body:has(#bottom-nav) #screen-history .history-stat-value { font-size: 1.25rem; }
  body:has(#bottom-nav) #screen-history .history-row { grid-template-columns: 76px 1fr auto; padding: 12px 14px; gap: 10px; }
  body:has(#bottom-nav) #screen-history .history-row-date { font-size: 0.72rem; }
}


/* ===========================================================
   Hour History daily table (tech-history.js v2)
   =========================================================== */
body:has(#bottom-nav) #screen-history .history-table-wrap {
  background: #ffffff;
  border: 1px solid #e2e5ea;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
body:has(#bottom-nav) #screen-history .history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
body:has(#bottom-nav) #screen-history .history-table thead th {
  background: #f9fafb;
  color: #6b7280;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #e2e5ea;
}
body:has(#bottom-nav) #screen-history .history-table th.history-th-hours,
body:has(#bottom-nav) #screen-history .history-table td.history-td-hours {
  text-align: right;
  white-space: nowrap;
  width: 100px;
}
body:has(#bottom-nav) #screen-history .history-table th.history-th-date,
body:has(#bottom-nav) #screen-history .history-table td.history-td-date {
  width: 160px;
  white-space: nowrap;
}
body:has(#bottom-nav) #screen-history .history-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f3f5;
  color: #1e2330;
  vertical-align: middle;
}
body:has(#bottom-nav) #screen-history .history-table tr:last-child td {
  border-bottom: none;
}
body:has(#bottom-nav) #screen-history .history-tr.no-entry td {
  color: #9ca3af;
  background: #fafbfc;
}
body:has(#bottom-nav) #screen-history .history-tr.is-today td {
  background: #fff7ec;
}
body:has(#bottom-nav) #screen-history .history-today-tag {
  background: #dd9933;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
body:has(#bottom-nav) #screen-history .history-td-project {
  font-weight: 600;
}
body:has(#bottom-nav) .history-tr.has-entry .history-td-hours {
  color: #dd9933;
  font-weight: 800;
}
body:has(#bottom-nav) #screen-history .history-dash {
  color: #c9ccd3;
  font-weight: 400;
}
body:has(#bottom-nav) #screen-history .history-table tfoot td {
  padding: 14px;
  background: #111827;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
}
body:has(#bottom-nav) #screen-history .history-foot-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
}
body:has(#bottom-nav) #screen-history .history-foot-hours {
  text-align: right;
  color: #dd9933;
  font-size: 1.05rem;
}
@media (max-width: 600px) {
  body:has(#bottom-nav) #screen-history .history-table { font-size: 0.8rem; }
  body:has(#bottom-nav) #screen-history .history-table thead th { padding: 10px 10px; font-size: 0.64rem; }
  body:has(#bottom-nav) #screen-history .history-table tbody td { padding: 10px 10px; }
  body:has(#bottom-nav) #screen-history .history-table td.history-td-date,
  body:has(#bottom-nav) #screen-history .history-table th.history-th-date { width: 92px; }
  body:has(#bottom-nav) #screen-history .history-today-tag { display: block; margin: 4px 0 0; width: fit-content; }
}


/* Modern History dashboard header (v5) */
body:has(#bottom-nav) #screen-history .history-dashboard {
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(17,24,39,0.18);
}
body:has(#bottom-nav) #screen-history .history-dash-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
body:has(#bottom-nav) #screen-history .history-dash-kicker {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #dd9933 !important;
}
body:has(#bottom-nav) #screen-history .history-dash-range {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  margin-top: 4px;
  color: #ffffff !important;
  letter-spacing: -0.3px;
}
body:has(#bottom-nav) #screen-history .history-dash-nav {
  display: flex;
  gap: 8px;
}
body:has(#bottom-nav) #screen-history .history-dash-nav .history-period-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap;
}
body:has(#bottom-nav) #screen-history .history-dash-nav .history-period-btn:hover:not(:disabled) {
  background: #dd9933 !important;
  border-color: #dd9933 !important;
  color: #111827 !important;
}
body:has(#bottom-nav) #screen-history .history-dash-nav .history-period-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
body:has(#bottom-nav) #screen-history .history-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
body:has(#bottom-nav) #screen-history .history-dash-stats .history-stat {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  padding: 14px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left !important;
  box-shadow: none !important;
}
body:has(#bottom-nav) #screen-history .history-stat-icon {
  width: 40px; height: 40px;
  background: rgba(221,153,51,0.2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex: 0 0 40px;
}
body:has(#bottom-nav) #screen-history .history-dash-stats .history-stat-label {
  font-size: 0.65rem !important;
  color: rgba(255,255,255,0.55) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700 !important;
}
body:has(#bottom-nav) #screen-history .history-dash-stats .history-stat-value {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-top: 2px;
  line-height: 1;
}
@media (max-width: 640px) {
  body:has(#bottom-nav) #screen-history .history-dashboard { padding: 18px 16px; border-radius: 12px; }
  body:has(#bottom-nav) #screen-history .history-dash-range { font-size: 1.25rem !important; }
  body:has(#bottom-nav) #screen-history .history-dash-stats { grid-template-columns: 1fr; gap: 8px; }
  body:has(#bottom-nav) #screen-history .history-stat-icon { width: 34px; height: 34px; flex: 0 0 34px; font-size: 1rem; }
  body:has(#bottom-nav) #screen-history .history-dash-stats .history-stat-value { font-size: 1.15rem !important; }
}


/* Entry card list (tech-history.js v6) — matches MY RECENT ENTRIES card style */
body:has(#bottom-nav) #screen-history .hist-entries-section { margin-top: 4px; }
body:has(#bottom-nav) #screen-history .hist-entries-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1e2330 !important;
  margin: 20px 4px 12px;
}
body:has(#bottom-nav) #screen-history .hist-entries-icon {
  font-size: 1.05rem;
}
body:has(#bottom-nav) #screen-history .hist-entries-count {
  background: #fff7ec;
  color: #dd9933;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-left: auto;
  border: 1px solid rgba(221,153,51,0.25);
}
body:has(#bottom-nav) #screen-history .hist-entries-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body:has(#bottom-nav) #screen-history .hist-entry-card {
  background: #ffffff;
  border: 1px solid #e2e5ea;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
  transition: border-color 0.15s, box-shadow 0.15s;
}
body:has(#bottom-nav) #screen-history .hist-entry-card:hover {
  border-color: rgba(221,153,51,0.4);
  box-shadow: 0 3px 10px rgba(17,24,39,0.06);
}
body:has(#bottom-nav) #screen-history .hist-entry-main {
  flex: 1 1 auto;
  min-width: 0;
}
body:has(#bottom-nav) #screen-history .hist-entry-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
body:has(#bottom-nav) #screen-history .hist-entry-date-main {
  font-weight: 800;
  font-size: 0.98rem;
  color: #1e2330;
}
body:has(#bottom-nav) #screen-history .hist-entry-date-wk {
  font-size: 0.85rem;
  color: #9ca3af;
  font-weight: 500;
}
body:has(#bottom-nav) #screen-history .hist-entry-project {
  font-size: 0.88rem;
  color: #4b5563;
  font-weight: 600;
  margin-top: 2px;
  word-break: break-word;
}
body:has(#bottom-nav) #screen-history .hist-entry-time {
  font-size: 0.82rem;
  color: #6b7280;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
body:has(#bottom-nav) #screen-history .hist-entry-notes {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #eef0f3;
  line-height: 1.45;
}
body:has(#bottom-nav) #screen-history .hist-entry-hours {
  flex: 0 0 auto;
  background: #fff7ec;
  color: #dd9933;
  border: 1px solid rgba(221,153,51,0.25);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  align-self: flex-start;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  body:has(#bottom-nav) #screen-history .hist-entry-card { padding: 12px 14px; gap: 10px; }
  body:has(#bottom-nav) #screen-history .hist-entry-date-main { font-size: 0.9rem; }
  body:has(#bottom-nav) #screen-history .hist-entry-project { font-size: 0.82rem; }
  body:has(#bottom-nav) #screen-history .hist-entry-hours { font-size: 0.76rem; padding: 4px 10px; }
}


/* === v54: Light-card History dashboard (matches entry-card aesthetic) === */
body:has(#bottom-nav) #screen-history .history-dashboard {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
  box-shadow: none !important;
  color: #1e2330 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
body:has(#bottom-nav) #screen-history .history-dash-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  background: #ffffff !important;
  border: 1px solid #e2e5ea !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
  margin-bottom: 0 !important;
}
body:has(#bottom-nav) #screen-history .history-dash-kicker {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #dd9933 !important;
}
body:has(#bottom-nav) #screen-history .history-dash-range {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  color: #1e2330 !important;
  margin-top: 4px !important;
  letter-spacing: -0.4px;
  line-height: 1.15;
}
body:has(#bottom-nav) #screen-history .history-dash-nav {
  display: flex !important;
  gap: 8px !important;
  flex-shrink: 0;
}
body:has(#bottom-nav) #screen-history .history-dash-nav .history-period-btn {
  background: #ffffff !important;
  border: 1px solid #e2e5ea !important;
  color: #4b5563 !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap;
  transition: all 0.15s;
}
body:has(#bottom-nav) #screen-history .history-dash-nav .history-period-btn:hover:not(:disabled) {
  background: #fff7ec !important;
  border-color: #dd9933 !important;
  color: #dd9933 !important;
}
body:has(#bottom-nav) #screen-history .history-dash-nav .history-period-btn:disabled {
  opacity: 0.35; cursor: not-allowed;
}
body:has(#bottom-nav) #screen-history .history-dash-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
body:has(#bottom-nav) #screen-history .history-dash-stats .history-stat {
  background: #ffffff !important;
  border: 1px solid #e2e5ea !important;
  border-bottom: none !important;
  border-radius: 14px !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body:has(#bottom-nav) #screen-history .history-dash-stats .history-stat:hover {
  border-color: rgba(221,153,51,0.4);
  box-shadow: 0 3px 10px rgba(17,24,39,0.06);
}
body:has(#bottom-nav) #screen-history .history-stat-icon {
  width: 44px !important; height: 44px !important;
  background: #fff7ec !important;
  border: 1px solid rgba(221,153,51,0.18) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  flex: 0 0 44px !important;
  color: #dd9933;
}
body:has(#bottom-nav) #screen-history .history-dash-stats .history-stat-label {
  font-size: 0.66rem !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  font-weight: 700 !important;
  line-height: 1.2;
}
body:has(#bottom-nav) #screen-history .history-dash-stats .history-stat-value {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #dd9933 !important;
  margin-top: 4px !important;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  body:has(#bottom-nav) #screen-history .history-dash-top { padding: 14px 16px; }
  body:has(#bottom-nav) #screen-history .history-dash-range { font-size: 1.25rem !important; }
  body:has(#bottom-nav) #screen-history .history-dash-stats { grid-template-columns: 1fr !important; gap: 8px !important; }
  body:has(#bottom-nav) #screen-history .history-dash-stats .history-stat { padding: 12px 14px !important; }
  body:has(#bottom-nav) #screen-history .history-stat-icon { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; font-size: 1.1rem !important; }
  body:has(#bottom-nav) #screen-history .history-dash-stats .history-stat-value { font-size: 1.25rem !important; }
}


/* ===========================================================
   v55 THEME: gold -> dark blue + bigger fonts (+2pt typography)
   Scoped to tech only via body:has(#bottom-nav).
   =========================================================== */
body:has(#bottom-nav) { font-size: 16px !important; }
body:has(#bottom-nav) *, body:has(#bottom-nav) *::before, body:has(#bottom-nav) *::after { font-size: inherit; }

/* Swap every gold accent to dark blue */
body:has(#bottom-nav) [style*="color:#dd9933"],
body:has(#bottom-nav) [style*="color: #dd9933"] { color: #1e3a8a !important; }
body:has(#bottom-nav) [style*="background:#dd9933"],
body:has(#bottom-nav) [style*="background: #dd9933"] { background: #1e3a8a !important; }

/* Core tech theme tokens */
body:has(#bottom-nav) .mode-btn.active,
body:has(#bottom-nav) .tab-btn.active {
  color: #1e3a8a !important;
  background: #dbeafe !important;
  border-color: #1e3a8a !important;
}

/* Gold pills -> dark blue pills (hours badges, filter pills, etc.) */
body:has(#bottom-nav) [style*="color:#dd9933"] { color: #1e3a8a !important; }
body:has(#bottom-nav) [style*="rgba(221,153,51,0.15)"] { background: rgba(30,58,138,0.1) !important; }
body:has(#bottom-nav) [style*="rgba(221,153,51,0.25)"] { border-color: rgba(30,58,138,0.25) !important; }

/* Pay-period stat tiles (tech.html dashboard) */
body:has(#bottom-nav) .stat-card,
body:has(#bottom-nav) .kpi-card {
  color: #1e3a8a !important;
}

/* Gold Submit button -> dark blue */
body:has(#bottom-nav) button[class*="submit"],
body:has(#bottom-nav) .submit-btn,
body:has(#bottom-nav) .btn-primary {
  background: #1e3a8a !important;
  border-color: #1e3a8a !important;
  color: #ffffff !important;
}

/* Fixed-color overrides via inline styles set from tech.html's JS */
body:has(#bottom-nav) [style*="#DD9933"] { color: #1e3a8a !important; background: rgba(30,58,138,0.08) !important; }

/* Sidebar active nav item (was gold tint on navy) -> blue tint on navy */
@media (min-width: 1024px) {
  body:has(#bottom-nav) #bottom-nav .nav-btn.active {
    background: rgba(30,58,138,0.25) !important;
    color: #93c5fd !important;
  }
}
@media (max-width: 1023px) {
  body:has(#bottom-nav) #bottom-nav .nav-btn.active { color: #1e3a8a !important; }
}

/* User-pill Out button hover + tech-sb-user.out-btn hover */
body:has(#bottom-nav) #tech-sb-user .sb-out-btn:hover { border-color: #93c5fd !important; color: #93c5fd !important; }

/* Sidebar ET logo square -> dark blue */
@media (min-width: 1024px) {
  body:has(#bottom-nav) #app-header .brand-logo-old,
  body:has(#bottom-nav) #app-header .brand-box {
    background: #1e3a8a !important; color: #ffffff !important;
  }
  body:has(#bottom-nav) #tech-sb-user .sb-avatar { background-color: #1e3a8a !important; color: #ffffff !important; }
}
@media (max-width: 1023px) {
  body:has(#bottom-nav) #app-header .brand-logo-old,
  body:has(#bottom-nav) #app-header .brand-box { background: #1e3a8a !important; color: #ffffff !important; }
  body:has(#bottom-nav) #app-header #user-pill #user-avatar { background: #1e3a8a !important; color: #ffffff !important; }
}

/* Ensure hours/status pills in Log Hours + Projects screens use blue */
body:has(#bottom-nav) .hours-pill,
body:has(#bottom-nav) .hrs-pill,
body:has(#bottom-nav) .status-pill.active-pill {
  background: #dbeafe !important;
  color: #1e3a8a !important;
  border-color: rgba(30,58,138,0.25) !important;
}

/* Hide the Dashboard nav button — user requested removal (same as Projects) */
body:has(#bottom-nav) #nav-dashboard { display: none !important; }

/* Footer color stays gold per portal/index; unaffected */

/* tech scope-complete: keep status-button text black so Pending/In Progress look clickable even when not active */
body:has(#bottom-nav) #screen-scope-complete button[onclick*="setScopeStatus"] {
  color: #0f172a !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
body:has(#bottom-nav) #screen-scope-complete button[onclick*="setScopeStatus"]:hover {
  filter: brightness(0.96);
}

/* compact scope library cards  hide description, keep only name + category */
body:has(#bottom-nav) .scope-lib-desc { display: none !important; }
body:has(#bottom-nav) .scope-lib-card { padding: 10px 12px !important; min-height: auto !important; }
body:has(#bottom-nav) .scope-lib-name { line-height: 1.2 !important; margin-bottom: 4px !important; }

/* Theme mode override: this file loads after app-theme.css on the tech portal. */
html[data-eg-theme="dark"]:has(body #bottom-nav) {
  background: #111827 !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) {
  background: #111827 !important;
  color: #f8fafc !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) main,
html[data-eg-theme="dark"] body:has(#bottom-nav) .screen,
html[data-eg-theme="dark"] body:has(#bottom-nav) #screen-projects {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  box-shadow: none !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) .card,
html[data-eg-theme="dark"] body:has(#bottom-nav) .panel,
html[data-eg-theme="dark"] body:has(#bottom-nav) .project-card,
html[data-eg-theme="dark"] body:has(#bottom-nav) .pm-proj-card,
html[data-eg-theme="dark"] body:has(#bottom-nav) .stat-card,
html[data-eg-theme="dark"] body:has(#bottom-nav) .kpi-card,
html[data-eg-theme="dark"] body:has(#bottom-nav) .tech-kpi-card,
html[data-eg-theme="dark"] body:has(#bottom-nav) .entry-card,
html[data-eg-theme="dark"] body:has(#bottom-nav) .mode-toggle,
html[data-eg-theme="dark"] body:has(#bottom-nav) .team-member-row,
html[data-eg-theme="dark"] body:has(#bottom-nav) .scope-item,
html[data-eg-theme="dark"] body:has(#bottom-nav) .scope-detail-header,
html[data-eg-theme="dark"] body:has(#bottom-nav) .proj-detail-header,
html[data-eg-theme="dark"] body:has(#bottom-nav) .proj-detail-progress,
html[data-eg-theme="dark"] body:has(#bottom-nav) .tech-paystub-row {
  background: #1f2937 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  box-shadow: none !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) #screen-projects .project-card,
html[data-eg-theme="dark"] body:has(#bottom-nav) #screen-projects .pm-proj-card,
html[data-eg-theme="dark"] body:has(#bottom-nav) #screen-projects .stat-card,
html[data-eg-theme="dark"] body:has(#bottom-nav) #screen-projects .kpi-card {
  background: #1f2937 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) h1,
html[data-eg-theme="dark"] body:has(#bottom-nav) h2,
html[data-eg-theme="dark"] body:has(#bottom-nav) h3,
html[data-eg-theme="dark"] body:has(#bottom-nav) h4,
html[data-eg-theme="dark"] body:has(#bottom-nav) .project-name,
html[data-eg-theme="dark"] body:has(#bottom-nav) .proj-title,
html[data-eg-theme="dark"] body:has(#bottom-nav) .scope-name-v3,
html[data-eg-theme="dark"] body:has(#bottom-nav) .tech-paystub-name {
  color: #f8fafc !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) label,
html[data-eg-theme="dark"] body:has(#bottom-nav) .label,
html[data-eg-theme="dark"] body:has(#bottom-nav) .form-label,
html[data-eg-theme="dark"] body:has(#bottom-nav) .project-client,
html[data-eg-theme="dark"] body:has(#bottom-nav) .project-progress-text,
html[data-eg-theme="dark"] body:has(#bottom-nav) .entry-project,
html[data-eg-theme="dark"] body:has(#bottom-nav) .entry-meta,
html[data-eg-theme="dark"] body:has(#bottom-nav) .tech-kpi-card .label,
html[data-eg-theme="dark"] body:has(#bottom-nav) .tech-kpi-card .sub,
html[data-eg-theme="dark"] body:has(#bottom-nav) .tech-paystub-meta,
html[data-eg-theme="dark"] body:has(#bottom-nav) .tech-paystub-status,
html[data-eg-theme="dark"] body:has(#bottom-nav) .hint,
html[data-eg-theme="dark"] body:has(#bottom-nav) .muted,
html[data-eg-theme="dark"] body:has(#bottom-nav) .subtle {
  color: #cbd5e1 !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) input,
html[data-eg-theme="dark"] body:has(#bottom-nav) select,
html[data-eg-theme="dark"] body:has(#bottom-nav) textarea,
html[data-eg-theme="dark"] body:has(#bottom-nav) .form-control {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) input::placeholder,
html[data-eg-theme="dark"] body:has(#bottom-nav) textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) .status-btn,
html[data-eg-theme="dark"] body:has(#bottom-nav) .mode-btn,
html[data-eg-theme="dark"] body:has(#bottom-nav) .tab-btn,
html[data-eg-theme="dark"] body:has(#bottom-nav) .eg-theme-toggle {
  background: #0f172a !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) .mode-btn.active,
html[data-eg-theme="dark"] body:has(#bottom-nav) .tab-btn.active,
html[data-eg-theme="dark"] body:has(#bottom-nav) .status-btn.active {
  background: rgba(221, 153, 51, 0.16) !important;
  color: #dd9933 !important;
  border-color: rgba(221, 153, 51, 0.55) !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) .hours-box,
html[data-eg-theme="dark"] body:has(#bottom-nav) .receipt-btn {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #86efac !important;
  border-color: rgba(134, 239, 172, 0.45) !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) .hours-pill,
html[data-eg-theme="dark"] body:has(#bottom-nav) .hrs-pill {
  background: rgba(96, 165, 250, 0.18) !important;
  color: #bfdbfe !important;
  border-color: rgba(147, 197, 253, 0.35) !important;
}
html[data-eg-theme="dark"] body:has(#bottom-nav) .chip,
html[data-eg-theme="dark"] body:has(#bottom-nav) .badge,
html[data-eg-theme="dark"] body:has(#bottom-nav) .role-pill,
html[data-eg-theme="dark"] body:has(#bottom-nav) .status-pill {
  color: #f8fafc !important;
}