/* Wright Media Accounting - global styles */
:root {
    --wm-navy: #12263f;
    --wm-blue: #1b6ec2;
    --wm-blue-dark: #155a9c;
    --wm-bg: #f4f6fa;
    --wm-border: #d8dee9;
    --wm-text: #1f2b3a;
    --wm-muted: #6b7684;
    --wm-danger: #c0392b;
    --wm-success: #1e7e34;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--wm-text);
    background-color: var(--wm-bg);
}

/* ---- Loading overlay ---- */
.loaderHolder {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 38, 63, 0.35);
}
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid rgba(255, 255, 255, 0.6);
    border-top-color: var(--wm-blue);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Login layout ---- */
.loginPage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--wm-navy) 0%, #1b3a5c 100%);
}
.loginCard {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    padding: 2.5rem 2.25rem;
}
.loginBrand {
    text-align: center;
    margin-bottom: 1.75rem;
}
.loginBrand .brandName {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wm-navy);
    letter-spacing: -0.02em;
}
.loginBrand .brandSub {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--wm-muted);
}
.loginCard h1 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: var(--wm-text);
}

.field { margin-bottom: 1rem; }
.field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wm-muted);
    margin-bottom: 0.35rem;
}
.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
    border: 1px solid var(--wm-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus {
    border-color: var(--wm-blue);
    box-shadow: 0 0 0 3px rgba(27, 110, 194, 0.15);
}

.passwordWrap { position: relative; }
.passwordWrap .toggleEye {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--wm-muted);
    font-size: 0.8rem;
    user-select: none;
}

.checkboxRow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 1.25rem;
    font-size: 0.85rem;
    color: var(--wm-muted);
}

.btnPrimary {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--wm-blue);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.btnPrimary:hover { background: var(--wm-blue-dark); }
.btnPrimary:disabled { opacity: 0.6; cursor: default; }

.messageBox { min-height: 1.25rem; margin-top: 1rem; text-align: center; }
.loginError { color: var(--wm-danger); font-size: 0.9rem; font-weight: 500; }
.loginMessage { color: var(--wm-success); font-size: 0.9rem; font-weight: 500; }

/* ---- Post-login dashboard ---- */
.appHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.75rem;
    background: var(--wm-navy);
    color: #fff;
}
.appHeader .brandName { font-weight: 700; }
.appHeader a { color: #cfe0f2; text-decoration: none; font-size: 0.9rem; }
.appHeader a:hover { text-decoration: underline; }

/* ---- Header hamburger menu (includes/appHeader.php) ---------------------------------------------
   One menu behind one button. Inside it: Dashboard, then a collapsible dropdown per portal section,
   then Sign out.

   The panel is white and the header bar behind it is navy, which is the whole reason every colour here
   is stated rather than inherited: `.appHeader a` sets a pale blue for the navy bar, and that blue on
   white was most of why the old menu was hard to read.

   Sizes are deliberately larger than the list this replaced - 0.9rem items, a 0.82rem section button
   with real letter-spacing instead of 0.68rem uppercase grey.
   ----------------------------------------------------------------------------------------------- */
.navMenu { position: relative; }

.navToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.navToggle:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.45); }
.navToggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(207, 224, 242, 0.45);
}
.navToggleOpen { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45); }

/* Three bars drawn from one element: the middle bar is the box, the outer two are pseudo-elements. */
.navBars,
.navBars::before,
.navBars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.navBars { position: relative; }
.navBars::before,
.navBars::after {
    content: '';
    position: absolute;
    left: 0;
}
.navBars::before { top: -6px; }
.navBars::after  { top: 6px; }

/* ---- The panel ---- */
.navDropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 50;
    width: max-content;
    min-width: 250px;
    max-width: min(90vw, 330px);
    padding: 0.4rem;
    background: #fff;
    border: 1px solid var(--wm-border);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(18, 38, 63, 0.22);
}
.navDropdown[hidden] { display: none; }

/* A top-level item: Dashboard, Sign out, or a lone report. Outspecifies `.appHeader a`. */
.appHeader .navDropdown .navItem {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--wm-text);
    text-decoration: none;
}
.appHeader .navDropdown .navItem:hover {
    background: rgba(27, 110, 194, 0.1);
    color: var(--wm-blue-dark);
    text-decoration: none;
}

/* ---- A section: its own button, and the links it holds ---- */
.navSection { margin-top: 0.1rem; }

.navSectionToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--wm-navy);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.navSectionToggle:hover {
    background: rgba(27, 110, 194, 0.1);
    color: var(--wm-blue-dark);
}
.navSectionToggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 110, 194, 0.35);
}

/* The section holding the page being viewed. Marked on the BUTTON, so it still reads when shut. */
.navSectionToggleCurrent { background: rgba(18, 38, 63, 0.06); }

.navCaret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
    transition: transform 0.15s;
}
.navSectionToggle[aria-expanded="true"] .navCaret { transform: rotate(180deg); }

/* In the flow rather than floating: the panel grows as sections open, so nothing overlaps and nothing
   needs positioning against the viewport. The left rule is what makes the indent read as containment. */
.navSectionMenu {
    margin: 0.1rem 0 0.35rem 0.7rem;
    padding-left: 0.35rem;
    border-left: 2px solid var(--wm-border);
}
.navSectionMenu[hidden] { display: none; }

.appHeader .navSectionMenu a {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--wm-text);
    text-decoration: none;
}
.appHeader .navSectionMenu a:hover {
    background: rgba(27, 110, 194, 0.1);
    color: var(--wm-blue-dark);
    text-decoration: none;
}

/* Where you are. Same treatment whether it is a report inside a section or a top-level item. */
.appHeader .navSectionMenu a.navCurrent,
.appHeader .navDropdown .navItem.navCurrent {
    font-weight: 700;
    color: var(--wm-navy);
    background: rgba(18, 38, 63, 0.06);
}

.navDivider {
    height: 1px;
    margin: 0.4rem 0.3rem;
    background: var(--wm-border);
}

.appMain {
    max-width: 900px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}
.card {
    background: #fff;
    border: 1px solid var(--wm-border);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.card h1 { margin-top: 0; color: var(--wm-navy); }

/* ---- Dashboard report tiles ---- */
.dashHeading { margin-bottom: 1.5rem; }
.dashHeading h1 {
    margin: 0 0 0.35rem;
    font-size: 1.4rem;
    color: var(--wm-navy);
}
.dashHeading p {
    margin: 0;
    color: var(--wm-muted);
    font-size: 0.9rem;
}

.dashSection { margin-bottom: 2.25rem; }
.dashSection:last-child { margin-bottom: 0; }
.dashSectionTitle {
    margin: 0 0 1rem;
    padding-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wm-muted);
    border-bottom: 1px solid var(--wm-border);
}

.tileGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.reportTile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--wm-border);
    border-top: 3px solid var(--wm-blue);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    padding: 1.25rem 1.35rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.reportTile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(18, 38, 63, 0.12);
    border-color: var(--wm-blue);
}
.reportTile:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(27, 110, 194, 0.3);
}

.tileName {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wm-navy);
    margin-bottom: 0.4rem;
}
.tileDesc {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--wm-muted);
}
.tileGo {
    margin-top: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wm-blue);
}

.siteFooter {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.8rem;
    color: var(--wm-muted);
}