/* paulhus-app.css
   Load AFTER bulma + paulhus-light.css
*/

/* -------------------------
   Tokens
-------------------------- */
:root {
    --pa-navy: #004a7c;
    --pa-green: #7fbf2a;
    --pa-blue: #2b6cb0;
    --pa-bg: #ffffff;
    --pa-text: #1f2937;
    --pa-muted: #6b7280;
    --pa-border: #e5e7eb;
    --pa-radius: 6px;
    --pa-gap-1: .25rem;
    --pa-gap-2: .5rem;
    --pa-gap-3: .75rem;
    --pa-gap-4: 1rem;
    --pa-gap-6: 1.5rem;
    --pa-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* -------------------------
   Baseline / content rhythm
-------------------------- */
html, body {
    background: var(--pa-bg);
    color: var(--pa-text);
}

a {
    color: var(--pa-blue);
}

    a:hover {
        text-decoration: underline;
    }

.section {
    padding-top: var(--pa-gap-4);
    padding-bottom: var(--pa-gap-6);
}

.container.is-fluid {
    padding-left: var(--pa-gap-4);
    padding-right: var(--pa-gap-4);
}

/* Make long text pages calmer */
.body-content,
.content {
    max-width: 1100px;
    line-height: 1.55;
}

/* -------------------------
   Sidebar / left nav
-------------------------- */
#NavMenu {
    background: #fff;
    border-right: 1px solid var(--pa-border);
    padding: var(--pa-gap-4);
    min-height: 100vh;
}

    /* Tighten Bulma menu, add clearer grouping */
    #NavMenu .menu-label {
        letter-spacing: .08em;
        text-transform: uppercase;
        font-size: .75rem;
        color: var(--pa-muted);
        margin-top: var(--pa-gap-4);
        margin-bottom: var(--pa-gap-2);
    }

    #NavMenu .menu-list a {
        border-radius: var(--pa-radius);
        padding: .45rem .6rem;
        color: var(--pa-text);
    }

        #NavMenu .menu-list a:hover {
            background: rgba(0,0,0,.04);
        }

        #NavMenu .menu-list a.is-active,
        #NavMenu .menu-list a[aria-current="page"] {
            background: rgba(127,191,42,.12);
            border-left: 3px solid var(--pa-green);
            padding-left: .45rem; /* compensate for border */
            color: var(--pa-text);
        }

    /* If you have a scrolling inner nav menu, keep scrollbar subtle */
    #NavMenu .menu {
        scrollbar-width: thin;
    }

/* -------------------------
   Top bar (project selector + actions)
   Uses Bulma .level
-------------------------- */
.level {
    padding: var(--pa-gap-3) var(--pa-gap-4);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    background: #fff;
}

    /* Make header controls "quiet" like your calendar ref */
    .level .button {
        font-weight: 600;
    }

    /* space between header left/right clusters */
    .level .level-left > * {
        margin-right: var(--pa-gap-3);
    }

    .level .level-right .buttons .button {
        margin-bottom: 0;
    }

/* -------------------------
   Buttons (semantic helpers)
   Use alongside Bulma: class="button pa-primary" etc.
-------------------------- */
/*.button.pa-primary {
    background: var(--pa-green);
    border-color: var(--pa-green);
    color: #fff;
}*/

    .button.pa-primary:hover {
        filter: brightness(0.95);
        color: #fff;
    }

.button.pa-secondary {
    background: var(--pa-blue);
    border-color: var(--pa-blue);
    color: #fff;
}

    .button.pa-secondary:hover {
        filter: brightness(0.95);
        color: #fff;
    }

/* Default buttons: keep neutral/quiet */
.button:not(.pa-primary):not(.pa-secondary) {
    background: #fff;
    border-color: var(--pa-border);
    color: var(--pa-text);
}

    .button:not(.pa-primary):not(.pa-secondary):hover {
        background: rgba(0,0,0,.03);
    }

/* -------------------------
   Dropdowns (project selector)
-------------------------- */
.dropdown .dropdown-menu {
    min-width: 22rem;
}

.dropdown .dropdown-content {
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow);
    border: 1px solid var(--pa-border);
}

.dropdown .dropdown-item {
    padding: .6rem .9rem;
}

    .dropdown .dropdown-item:hover,
    .dropdown .dropdown-item.is-active {
        background: rgba(127,191,42,.10);
    }

/* -------------------------
   “Card-lite” downloads / links (ref: EIV forms)
   Add class="pa-card-lite pa-accent-left" to any block
-------------------------- */
.pa-card-lite {
    background: #fff;
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    padding: var(--pa-gap-4);
}

    .pa-card-lite:hover {
        box-shadow: var(--pa-shadow);
    }

.pa-accent-left {
    border-left: 4px solid var(--pa-green);
    padding-left: calc(var(--pa-gap-4) - 4px);
}

/* For small “CEO green tick” style accents */
.pa-accent-marker {
    border-left: 3px solid var(--pa-green);
    padding-left: .75rem;
}

/* -------------------------
   Forms / inputs (keep boring + consistent)
-------------------------- */
.input, .textarea, .select select {
    border-color: var(--pa-border);
    border-radius: var(--pa-radius);
    box-shadow: none;
}

    .input:focus, .textarea:focus, .select select:focus {
        border-color: rgba(43,108,176,.55);
        box-shadow: 0 0 0 3px rgba(43,108,176,.15);
    }

.label {
    font-size: .85rem;
    color: var(--pa-muted);
    letter-spacing: .02em;
}

/* -------------------------
   Lists / tables (lightweight separation)
-------------------------- */
.pa-list > * + * {
    border-top: 1px solid var(--pa-border);
    padding-top: var(--pa-gap-3);
    margin-top: var(--pa-gap-3);
}

/* Optional: calm page title band (navy) if you need it */
.pa-titleband {
    background: var(--pa-navy);
    color: #fff;
    padding: var(--pa-gap-4);
    border-radius: var(--pa-radius);
}