/*
 * The "PonControl" wordmark, recreated as real text instead of img/logo.png (retired - see every
 * caller of this file: main.php's sidebar, auth_ui.php's admin panel, portal_layout.php's
 * customer-portal nav, main_setup.php's setup wizard). Sampled directly from the old raster
 * logo's pixels: Trebuchet MS - a strong match for its curled t/r terminals and the single-story
 * looped g in "manager" - colored #1795bd (the P/C accent) and #61747a (the rest), with Verdana
 * as a same-era fallback for anyone without Trebuchet MS installed (a licensed Microsoft font,
 * not something this app can bundle/self-host). Same treatment already shipped on the public
 * marketing site (poncontrol-public-website).
 *
 * Colors are fixed regardless of light/dark theme, same as the original raster image was -
 * a brand mark's own colors don't follow a UI theme toggle. That's also why this works
 * unchanged on main.php's sidebar (always a dark surface, theme-independent) and on
 * auth_ui.php/main_setup.php (deliberately always light, no theme toggle reaches them at all).
 */
.brand-word {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-weight: 700;
    color: #61747a;
    white-space: nowrap;
}

.brand-word .accent { color: #1795bd; }

.brand-tag {
    display: block;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    color: #9aa7a6;
    white-space: nowrap;
    font-size: 0.58rem;
    letter-spacing: -0.02em;
    margin-top: -2px;
}

/* Small header/sidebar placement (main.php, auth_ui.php, portal_layout.php) - wordmark stacked
   with its tiny tagline underneath, centered under it. */
.brand-mark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.brand-mark .brand-word { font-size: 1.5rem; }

/* Bigger standalone placement (main_setup.php's first-run wizard). */
.brand-mark-lg .brand-word { font-size: 2.4rem; }
.brand-mark-lg .brand-tag { font-size: 0.85rem; }

/* main.php's sidebar only: the wordmark was sitting directly on the sidebar's own flat
   #222e3c, with nothing setting it apart from the nav links right below it. Tried a translucent
   beige (tinted to the original logo.png's own background) here too, but it blended into a
   mid-gray taupe that needed the wordmark's own colors darkened just to stay readable - rolled
   back to the plain lighter-slate card instead, closer to how it read before that detour. */
#sidebar .sidebar-brand {
    background: #3e4f61;
    border-radius: 0.4rem;
    margin: 0.75rem 0.75rem 0.5rem;
    padding: 1rem 1.25rem;
    text-align: center;
}

/* Wordmark itself (the upper line) a touch lighter than its global grey, still scoped to just
   this card rather than changing that color everywhere else it's used. */
#sidebar .sidebar-brand .brand-word { color: #7c8c92; }