/* ============================================
   SHARED APP HEADER
   ----------------------------------------------
   The single source of truth for the header that appears on every signed-in
   page. Markup is generated by /Scripts/app-header.js, so a page only needs:

       <div id="app-header" data-page="calculator"></div>
       <script src="/Scripts/app-header.js"></script>

   Nothing here is page-specific. Resist the urge to add a per-page override -
   inconsistent headers are the problem this file exists to solve.
   ============================================ */

:root {
    /* Every page's header and content column share this width so the two line
       up and pages stop jumping around as you navigate between them. */
    --app-max-width: 1600px;
    --app-header-bg: linear-gradient(135deg, #2c3e50, #3498db);
}

/* Applied to each page's outermost content container. */
.app-page {
    max-width: var(--app-max-width);
    margin-left: auto;
    margin-right: auto;
}

.app-header {
    max-width: var(--app-max-width);
    margin: 0 auto 30px;
    padding: 20px 24px;
    background: var(--app-header-bg);
    color: white;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.app-header__brand {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.app-header__logo {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    /* Relative to this stylesheet, i.e. /Styles/MV_WHITE_LARGE.png */
    background-image: url('MV_WHITE_LARGE.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.app-header__titles h1 {
    margin: 0 0 4px;
    font-size: 2em;
    line-height: 1.15;
    font-weight: 600;
}

.app-header__titles p {
    margin: 0;
    font-size: 1.05em;
    opacity: 0.9;
}

.app-header__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* One shared pill style for every header link, so "Reporting" on the
   calculator looks identical to "Reporting" on the analytics page. */
.app-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-family: inherit;
    font-size: 0.9em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s;
}

.app-nav-link:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* The page you are already on: still present so the nav never changes shape,
   but clearly marked and inert. */
.app-nav-link--current {
    background: rgba(255, 255, 255, 0.42);
    cursor: default;
    font-weight: 600;
}

.app-nav-link--logout {
    background: #e74c3c;
    margin-left: 6px;
}

.app-nav-link--logout:hover {
    background: #c0392b;
}

.app-header__user {
    font-size: 0.85em;
    opacity: 0.85;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .app-header {
        justify-content: center;
        text-align: center;
    }

    .app-header__nav {
        justify-content: center;
    }
}

/* ============================================
   MATERIAL SYMBOLS
   ----------------------------------------------
   Icons replace the emoji this app used to lean on. Usage:

       <span class="micon">print</span>

   The font itself comes from the Google Fonts <link> in each page's <head>.
   Icon names: https://fonts.google.com/icons
   ============================================ */

.micon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: -0.22em;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    /* Until the font loads the glyph name would render as literal text
       ("print"), which is worse than a blank space. */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Set by app-header.js when the font could not be fetched. Without this the
   ligature names show up as literal words next to their labels. */
.no-micon .micon,
.no-micon .report-table th.sortable::after {
    display: none;
}

/* Sizes for icons used outside body text. */
.micon--sm { font-size: 1em; }
.micon--lg { font-size: 1.6em; }
.micon--xl { font-size: 2.4em; }

/* Icon carrying meaning on its own (status messages, empty states). */
.micon--status {
    vertical-align: -0.2em;
    margin-right: 6px;
}