/* DASHBOARD_REDESIGN_2026_06_16 — global v2 styles.
   Loaded only when v2 mode is active. Hides legacy sidebar+header+
   bottom-nav and styles the new top navigation. Individual pages
   (today_v2.php) can layer on their own editorial styles on top. */

:root {
    --t-bg:        #fafaf8;
    --t-card:      #ffffff;
    --t-ink:       #0a0a0a;
    --t-muted:     #6b6f72;
    --t-line:      #e8e6e0;
    --t-volt:      #B9D53F;
    --t-volt-dark: #95ab2f;
}

body.v2 {
    background: var(--t-bg);
}

/* Hide all legacy chrome — sidebar, header, bottom nav. */
body.v2 .app-sidebar,
body.v2 .sidebar,
body.v2 aside.sidebar,
body.v2 .app-header,
body.v2 header.app-header,
body.v2 .app-bottom-nav,
body.v2 nav.bottom-nav,
body.v2 .bottom-nav {
    display: none !important;
}

/* Reclaim full width. The legacy layout sets `body.mode-app` to
   `display: flex; flex-direction: row` with a sidebar on the left and
   main on the right. With the sidebar hidden, the topnav we inject
   becomes a flex item competing for horizontal space — pushing main
   to the right of the topnav. We override the body's flex layout to
   block-stack so topnav sits on top and main spans full width below. */
body.v2,
body.v2.mode-app,
body.v2.mode-platform {
    display: block !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
}
body.v2 main.app-main,
body.v2 .app-main,
body.v2 .app-content {
    display: block !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: static !important;
}

/* ── Top navigation ── */
.t-topnav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250,250,248,0.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--t-line);
}
.t-topnav-inner {
    max-width: 1480px; margin: 0 auto;
    display: grid; grid-template-columns: auto 1fr auto auto;
    gap: 24px; align-items: center;
    padding: 14px 36px;
}
.t-brand {
    display: inline-flex; align-items: center; gap: 9px;
    text-decoration: none; color: var(--t-ink);
}
.t-brand-mark {
    width: 30px; height: 30px; border-radius: 8px;
    background: #0a0a0a;
    display: inline-flex; align-items: center; justify-content: center;
}
.t-brand-word {
    font-family: "Chakra Petch", "Inter", sans-serif;
    font-weight: 700; letter-spacing: 0.04em; font-size: 17px;
}
.t-nav-links { display: flex; gap: 4px; align-items: center; }
.t-nav-link {
    display: inline-flex; align-items: center;
    padding: 8px 14px; border-radius: 8px;
    text-decoration: none; color: var(--t-muted);
    font-size: 13px; font-weight: 600;
    transition: background 0.12s, color 0.12s;
}
.t-nav-link:hover { background: #f1efe6; color: var(--t-ink); }
.t-nav-link.active { color: var(--t-ink); background: #f1efe6; }
.t-search {
    position: relative; min-width: 320px; max-width: 480px;
}
.t-search input {
    width: 100%; padding: 9px 14px 9px 36px;
    border: 1px solid var(--t-line); border-radius: 999px;
    background: #fff; font-size: 13px; color: var(--t-ink);
    font-family: inherit;
}
.t-search input::placeholder { color: #9ca3af; }
.t-search input:focus { outline: none; border-color: var(--t-volt); box-shadow: 0 0 0 3px rgba(185,213,63,0.18); }
.t-search svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; color: #9ca3af; pointer-events: none;
}
.t-profile {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--t-volt); color: #0a0a0a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; text-decoration: none;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--t-line);
}
@media (max-width: 900px) {
    .t-topnav-inner { grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 20px; }
    .t-nav-links { display: none; }
    .t-search { min-width: 0; }
}

/* ── Legacy page centering (Customers/Pipeline/Coaching) ── */
/* Legacy pages don't yet have their own editorial redesign — give their
   inner sections a centered canvas at the same max-width as the topnav
   so the chrome feels unified. Skip the .t-page (today_v2) marker so we
   don't double-wrap pages that already self-center. */
body.v2 .app-content section.page:not(.t-page),
body.v2 .app-content > section:not(.t-page):not(.page),
body.v2 .app-content > .page:not(.t-page) {
    max-width: 1480px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px 36px 72px;
    box-sizing: border-box;
}
@media (min-width: 1800px) {
    .t-topnav-inner { max-width: 1640px; }
    body.v2 .app-content section.page:not(.t-page),
    body.v2 .app-content > section:not(.t-page):not(.page),
    body.v2 .app-content > .page:not(.t-page) { max-width: 1640px; }
}