/* ── Variables ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --dig-blue:  #1a3a6b;
    --dig-gold:  #c8a84b;
    --bg:        #f2f5fa;
    --card:      #ffffff;
    --border:    #d8dfe9;
    --text:      #1e2a3a;
    --muted:     #5f7089;
    --radius:    12px;
    --shadow:    0 1px 3px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.06);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
    background: var(--dig-blue);
    padding: 0 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.logo-img {
    height: 36px;
    width: auto;
}
.logo-dig {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dig-gold);
    letter-spacing: -.02em;
}
.logo-text {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,.9);
}
.header-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.user-name {
    color: rgba(255,255,255,.8);
    font-size: .9rem;
}
.btn-signout {
    color: var(--dig-gold);
    text-decoration: none;
    font-size: .85rem;
    border: 1px solid var(--dig-gold);
    padding: .3rem .75rem;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.btn-signout:hover {
    background: var(--dig-gold);
    color: var(--dig-blue);
}

/* ── Portal grid ─────────────────────────────────────────────────────────── */
main {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 2rem auto;
    padding: 0 1.5rem;
}
.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* ── Section card ────────────────────────────────────────────────────────── */
.portal-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
}
.portal-card h2 {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    border-bottom: 2px solid var(--dig-gold);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}
.portal-card ul {
    list-style: none;
}
.portal-card li {
    margin-bottom: .25rem;
}
.portal-card a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: 7px;
    text-decoration: none;
    color: var(--text);
    font-size: .95rem;
    transition: background .12s;
}
.portal-card a:hover {
    background: var(--bg);
    color: var(--dig-blue);
}
.link-icon {
    font-size: 1.1rem;
    width: 1.4rem;
    text-align: center;
    flex-shrink: 0;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
    text-align: center;
    padding: 1.25rem 1rem;
    font-size: .8rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    margin-top: auto;
}
footer a {
    color: var(--dig-blue);
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

/* ── Login page ──────────────────────────────────────────────────────────── */
body.login-page {
    justify-content: center;
    align-items: center;
    gap: 0;
}
body.login-page footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
.login-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.login-logo h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dig-blue);
    margin-top: .5rem;
}
.login-logo p {
    color: var(--muted);
    font-size: .9rem;
    margin-top: .2rem;
}
.logo-img-lg {
    height: 64px;
    width: auto;
}
.login-error {
    background: #fef2f2;
    border: 1px solid #ef4444;
    color: #b91c1c;
    border-radius: 7px;
    padding: .65rem 1rem;
    font-size: .875rem;
    width: 100%;
}
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .7rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: box-shadow .15s, background .15s;
}
.btn-google:hover {
    background: #f8faff;
    box-shadow: 0 2px 8px rgba(0,0,0,.13);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .portal-grid {
        grid-template-columns: 1fr;
    }
    header { padding: 0 1rem; }
    .user-name { display: none; }
}