/*
 * SIS portal shell: the design tokens, the page background and the header (brand, top navigation,
 * account menu, phone bottom bar).
 *
 * Loaded on every parent-portal page and on EVERY HR portal page, straight after global.css. The
 * HR pages that have not been moved to the new design yet keep their own styles (they do not load
 * parent-portal.css, which restyles buttons, cards and type across the page) but share this header
 * and background with the ones that have. So nothing in here may style anything but the page
 * background and the header's own classes.
 */

@import url("https://fonts.googleapis.com/css?family=Raleway:500,600,700|Source+Sans+Pro:400,600,700&display=swap");

:root {
    /* Brand: the green of the school's tree logo. */
    --pp-accent: #35685d;
    --pp-accent-strong: #2a5449;
    --pp-accent-soft: #e6efec;
    --pp-accent-soft-2: #d2e3dd;
    --pp-accent-contrast: #ffffff;

    /* Warm neutrals. */
    --pp-bg: #f6f4ef;
    --pp-surface: #ffffff;
    --pp-surface-sunken: #efece5;
    --pp-border: #e2ddd3;
    --pp-border-strong: #cfc8bb;
    --pp-text: #1f1d1a;
    --pp-text-2: #55514a;
    --pp-text-muted: #6b665d;

    /* Semantic. */
    --pp-success: #2f7d4f;
    --pp-success-soft: #e3f1e8;
    --pp-warning: #b7791f;
    --pp-warning-soft: #fbf1dd;
    --pp-danger: #b3261e;
    --pp-danger-soft: #f9e5e3;
    --pp-info: var(--pp-accent);
    --pp-info-soft: var(--pp-accent-soft);

    /* Module hues for the dashboard poster tiles (muted, warm). */
    --pp-hue-finance: #35685d;
    --pp-hue-finance-soft: #dfeae6;
    --pp-hue-school: #775a16;
    --pp-hue-school-soft: #f3e9d2;
    --pp-hue-affairs: #8f4a33;
    --pp-hue-affairs-soft: #f6e3dc;
    --pp-hue-transport: #4a5d78;
    --pp-hue-transport-soft: #e1e6ee;

    /* Type. */
    --pp-font-display: "Raleway", "Source Sans Pro", sans-serif;
    --pp-font-body: "Source Sans Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
    --pp-text-xs: 13px;
    --pp-text-sm: 14px;
    --pp-text-base: 16px;
    --pp-text-md: 18px;
    --pp-text-lg: 22px;
    --pp-text-xl: 28px;
    --pp-text-2xl: 36px;

    /* Space, radius, elevation, motion. */
    --pp-space-1: 4px;
    --pp-space-2: 8px;
    --pp-space-3: 12px;
    --pp-space-4: 16px;
    --pp-space-5: 20px;
    --pp-space-6: 24px;
    --pp-space-8: 32px;
    --pp-space-12: 48px;
    --pp-gutter: 16px;
    --pp-container: 1200px;
    --pp-radius-sm: 6px;
    --pp-radius-md: 10px;
    --pp-radius-lg: 14px;
    --pp-radius-pill: 999px;
    --pp-shadow-float: 0 8px 24px rgba(31, 29, 26, 0.12), 0 1px 3px rgba(31, 29, 26, 0.08);
    --pp-duration-fast: 120ms;
    --pp-duration-base: 200ms;
    --pp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --pp-focus-ring: 0 0 0 3px rgba(53, 104, 93, 0.35);
    --pp-header-height: 56px;
    --pp-bottom-nav-height: 60px;

}

/* Page background. "html body" so it also wins over an older page's own body { background }. */
html,
html body {
    background: var(--pp-bg);
}

/* The faded watermark art behind every page is gone. */
.background-art {
    display: none;
}

/* Header. Its container follows the new pages' width whatever global.css says. */
.pp-header .harmony-container {
    max-width: var(--pp-container);
    margin: 0 auto;
    padding-inline: var(--pp-gutter);
}

.pp-header {
    height: var(--pp-header-height);
    background: var(--pp-surface);
    border-bottom: 1px solid var(--pp-border);
    font-family: var(--pp-font-display);
    color: var(--pp-text);
    position: sticky;
    top: 0;
    z-index: 999;
}

.pp-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--pp-space-4);
    line-height: normal;
    color: var(--pp-text);
}

.pp-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pp-text);
    text-decoration: none;
    flex-shrink: 0;
    min-height: 44px;
}

.pp-brand:hover {
    color: var(--pp-text);
    text-decoration: none;
}

.pp-brand .logo {
    width: 34px;
    height: 34px;
    margin: 0;
    float: none;
    object-fit: contain;
}

.pp-brand .logo-span {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    min-width: 0;
    line-height: 1.15;
}

.pp-brand .logo-span small {
    display: block;
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--pp-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Desktop top navigation (the menu partial). */
.pp-topnav {
    display: none;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.pp-topnav::-webkit-scrollbar {
    display: none;
}

.pp-topnav .scroll-container {
    display: flex;
    height: 100%;
    gap: var(--pp-space-1);
}

.pp-topnav .nav,
.pp-topnav .nav:first-child,
.pp-topnav .nav:last-child {
    float: none;
    margin: 0;
    padding: 0 var(--pp-space-3);
    height: 100%;
    line-height: var(--pp-header-height);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text-2);
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    white-space: nowrap;
    transition: color var(--pp-duration-fast) var(--pp-ease), border-color var(--pp-duration-fast) var(--pp-ease);
}

.pp-topnav .nav ion-icon {
    display: none;
}

.pp-topnav .nav:hover {
    color: var(--pp-accent);
    text-decoration: none;
}

.pp-topnav .nav.active {
    color: var(--pp-accent);
    border-bottom-color: var(--pp-accent);
}

/* Account menu (hover/tap dropdown kept from global.css, restyled). */
.pp-account {
    margin-inline-start: auto;
    margin-inline-end: 0;
    float: none;
    display: flex;
    align-items: center;
    height: 100%;
}

.pp-account .nav-dropdown {
    height: 100%;
    display: flex;
    align-items: center;
}

.pp-account__button {
    appearance: none;
    border: 1px solid var(--pp-border);
    background: var(--pp-surface);
    border-radius: var(--pp-radius-pill);
    padding: 4px 10px 4px 4px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pp-font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text);
    cursor: pointer;
    transition: border-color var(--pp-duration-fast) var(--pp-ease), background var(--pp-duration-fast) var(--pp-ease);
}

.pp-account__button:hover,
.nav-dropdown:hover .pp-account__button {
    border-color: var(--pp-border-strong);
    background: var(--pp-surface-sunken);
}

.pp-account__button .user-name {
    max-width: 96px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-account__button ion-icon {
    font-size: 16px;
    color: var(--pp-text-muted);
}

.pp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pp-accent-soft);
    flex-shrink: 0;
}

.pp-account .nav-dropdown-content {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 280px;
    max-width: calc(100vw - 2 * var(--pp-gutter));
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    box-shadow: var(--pp-shadow-float);
    padding: var(--pp-space-2);
    z-index: 1000;
}

/* The menu sits 6px clear of the button, and it opens on hovering .nav-dropdown - whose box is the
   button's. Without this the pointer crossed 6px of nothing on the way down, .nav-dropdown stopped
   being :hover and the menu shut before it could be reached. The bridge is part of the menu, so
   the gap counts as hovering the dropdown; it only exists while the menu is open, and it is a
   little taller than the gap so a diagonal path across it still lands on something. */
.pp-account .nav-dropdown-content::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 100%;
    height: 10px;
}

.pp-account .nav-dropdown:hover .nav-dropdown-content,
.pp-account .nav-dropdown:focus-within .nav-dropdown-content {
    display: block;
}

.pp-account__identity {
    display: flex;
    align-items: center;
    gap: var(--pp-space-3);
    padding: var(--pp-space-3);
    border-bottom: 1px solid var(--pp-border);
    margin-bottom: var(--pp-space-2);
}

.pp-account__identity .pp-avatar {
    width: 44px;
    height: 44px;
}

.pp-account__identity strong {
    display: block;
    font-family: var(--pp-font-display);
    font-size: 15px;
    line-height: 1.2;
}

.pp-account__identity span {
    display: block;
    font-size: var(--pp-text-xs);
    color: var(--pp-text-muted);
}

.pp-account__section {
    padding: 6px var(--pp-space-3) 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
}

.pp-account .nav-dropdown-content a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 var(--pp-space-3);
    min-height: 44px;
    line-height: 1.3;
    border-radius: var(--pp-radius-sm);
    font-family: var(--pp-font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--pp-text);
    white-space: normal;
}

.pp-account .nav-dropdown-content a:hover {
    background: var(--pp-surface-sunken);
    color: var(--pp-text);
    text-decoration: none;
}

.pp-account .nav-dropdown-content a ion-icon {
    font-size: 18px;
    color: var(--pp-text-muted);
    flex-shrink: 0;
}

.pp-account .nav-dropdown-content a.pp-account__logout {
    color: var(--pp-danger);
    margin-top: var(--pp-space-1);
    border-top: 1px solid var(--pp-border);
    border-radius: 0 0 var(--pp-radius-sm) var(--pp-radius-sm);
}

/* Mobile bottom navigation (the same menu partial, icons + labels). */
.pp-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 998;
    background: var(--pp-surface);
    border-top: 1px solid var(--pp-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(var(--pp-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

.pp-bottom-nav .nav,
.pp-bottom-nav .nav:first-child,
.pp-bottom-nav .nav:last-child {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 6px 4px 4px;
    height: var(--pp-bottom-nav-height);
    line-height: 1.1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--pp-font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-text-muted);
    border-bottom: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--pp-duration-fast) var(--pp-ease);
}

.pp-bottom-nav .nav ion-icon {
    font-size: 24px;
    transition: transform var(--pp-duration-fast) var(--pp-ease);
}

.pp-bottom-nav .nav span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-bottom-nav .nav:hover {
    color: var(--pp-accent);
    text-decoration: none;
}

.pp-bottom-nav .nav.active {
    color: var(--pp-accent);
    border-bottom: 0;
}

.pp-bottom-nav .nav.active ion-icon {
    transform: translateY(-1px);
}

.pp-bottom-nav .nav:active ion-icon {
    transform: scale(0.92);
}

@media screen and (min-width: 768px) {
    .pp-topnav {
        display: block;
    }

    .pp-bottom-nav {
        display: none;
    }

    .pp-brand .logo {
        width: 38px;
        height: 38px;
    }
}

@media screen and (max-width: 767px) {
    .pp-header .harmony-menu,
    .hamburger-menu {
        display: none !important;
    }

    .pp-account__button .user-name {
        display: none;
    }

    .pp-account__button {
        padding: 3px;
        border-radius: 50%;
    }

    .pp-account__button ion-icon {
        display: none;
    }
}

/* Seven HR links fit the phone bar only with short labels and a smaller icon. */
@media screen and (max-width: 420px) {
    .pp-bottom-nav--dense .nav,
    .pp-bottom-nav--dense .nav:first-child,
    .pp-bottom-nav--dense .nav:last-child {
        font-size: 10px;
        padding-inline: 2px;
    }

    .pp-bottom-nav--dense .nav ion-icon {
        font-size: 22px;
    }
}

/* Older HR pages have no .main-container padding under the phone bottom bar; keep their last
   lines clear of it. */
@media screen and (max-width: 767px) {
    body.pp-legacy-page.pp-has-bottom-nav {
        padding-bottom: calc(var(--pp-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }
}

@media print {
    .pp-bottom-nav,
    .pp-header {
        display: none !important;
    }
}