/* ==========================================
   SSPAYROLLS - Organization Gateway Page
   Deliberately restrained palette: deep navy (base) + ONE accent color
   (Rwanda blue) used everywhere something is interactive (button, focus
   state, links, icons). Gold appears in exactly one place - the sun emblem
   in the logo. Yellow and green appear in exactly one place - the login
   card's top rule - in the flag's own true proportions (blue 1/2, yellow
   1/4, green 1/4), never scattered elsewhere as decoration. Fewer colors,
   used with intent, reads as designed; many colors scattered around reads
   as a template.
   ========================================== */

:root {
    --sky-1: #0b1130;
    --sky-2: #182a52;
    --sky-3: #24365f;
    --gold: #f2b90f;
    --gold-soft: #ffd76a;
    --rw-blue: #00a1de;
    --rw-blue-deep: #0077ab;
    --rw-yellow: #fad201;
    --rw-green: #00a651;
    --text: #f4f7ff;
    --text-dim: #b7c1da;
    --card-bg: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    position: relative;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--text);
}

/* Hard guarantee of "one screen, never a scrollbar" on desktop/tablet:
   the page is locked to exactly the viewport height and anything that
   doesn't fit is sized down via the vh-aware clamp()s below, not clipped.
   Real browser chrome (address bar, bookmarks bar, tabs) eats into the
   usable height on top of whatever the monitor resolution is, which is
   why this has to be height-driven, not just width-driven like a normal
   responsive layout. Below 980px wide, or on short/rotated phones, this
   is dropped in favour of natural scrolling - forcing a tall, stacked
   mobile layout into one screen would make it unreadable instead. */
html, body { overflow: hidden; }
@media (max-width: 980px), (max-height: 560px) {
    html, body { height: auto; overflow: visible; }
}

.page {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1;
}
@media (max-width: 980px), (max-height: 560px) {
    .page { height: auto; min-height: 100vh; }
}

/* ==========================================
   BACKGROUND - layered to feel like dusk light + distant city glow,
   not a flat dark panel. Fixed so it never re-tiles/looks thin on scroll.
   ========================================== */
.bg-decor {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(560px 420px at 12% 10%, rgba(255,255,255,.16), rgba(255,255,255,0) 65%),
        radial-gradient(55% 45% at 85% 20%, rgba(0,161,222,.2), rgba(0,161,222,0) 65%),
        linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%);
}

.world {
    position: absolute;
    top: 6%;
    right: 2%;
    width: min(38vw, 460px);
    height: min(38vw, 460px);
    opacity: .5;
}
@media (max-width: 900px) { .world { opacity: .22; width: 70vw; height: 70vw; top: 4%; right: -18%; } }

.world .grid-line { stroke: rgba(244,247,255,.18); stroke-width: 1; fill: none; }
.world .globe-outline { stroke: rgba(244,247,255,.3); stroke-width: 1.2; fill: none; }
.world .arc { stroke: rgba(244,247,255,.4); stroke-width: 1.4; fill: none; opacity: .6; stroke-dasharray: 4 5; animation: dash 6s linear infinite; }
.world .arc.arc-blue { stroke: var(--rw-blue); opacity: .8; }
.world .pin { fill: rgba(244,247,255,.5); animation: pulse 2.4s ease-in-out infinite; }
.world .pin.pin-blue { fill: var(--rw-blue); animation-delay: .6s; }

@keyframes dash { to { stroke-dashoffset: -60; } }
@keyframes pulse {
    0%, 100% { r: 3.2; opacity: 1; }
    50% { r: 5.5; opacity: .55; }
}

/* ==========================================
   TOPBAR
   ========================================== */
.topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(10px, 2.6vh, 20px) clamp(16px, 5vw, 56px) 0;
    flex-shrink: 0;
}

.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: .4px; }
/* A small stylised sun - the emblem from the Rwandan flag - instead of a
   generic logo tile. Subtle radiating glow, not a literal flag graphic. */
.brand-mark {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 0 6px rgba(242,185,15,.55));
}
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark .sun-core { fill: var(--gold); }
.brand-mark .sun-ray { stroke: var(--gold); stroke-width: 3.4; stroke-linecap: round; }

.tagline-chip {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    padding: 6px 13px;
    border-radius: 30px;
    white-space: nowrap;
}
@media (max-width: 640px) { .tagline-chip { display: none; } }

/* ==========================================
   SHINE - a slow, periodic light sweep. Reserved for the single most
   important action on the page (the Proceed to Login button) so it reads
   as "this is the thing to click" rather than decoration scattered
   everywhere. Runs once every few seconds, not continuously.
   ========================================== */
.shine {
    position: relative;
    overflow: hidden;
}
.shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: shineSweep 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shineSweep {
    0%   { left: -60%; }
    16%  { left: 130%; }
    100% { left: 130%; }
}
.chip-ic {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    stroke: var(--rw-blue);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================
   HERO - fills remaining space, two columns
   ========================================== */
main.hero {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.82fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(6px, 1.5vh, 18px) clamp(16px, 5vw, 56px) 0;
    overflow: hidden;
}
@media (max-width: 980px) {
    main.hero { grid-template-columns: 1fr; padding-top: 10px; overflow: visible; }
}

.hero-content { animation: fadeUp .6s ease both; min-width: 0; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.hero-content h1 {
    font-size: clamp(22px, 3.1vw + 1.4vh, 38px);
    line-height: 1.14;
    font-weight: 800;
    margin-bottom: clamp(8px, 1.6vh, 14px);
}
.hero-content h1 em {
    font-style: normal;
}

.hero-sub {
    font-size: clamp(11px, .5vw + .55vh, 13.5px);
    line-height: 1.6;
    color: var(--text-dim);
    max-width: 620px;
    margin-bottom: clamp(10px, 2vh, 20px);
}

/* ---- Right: login card ---- */
.login-card {
    position: relative;
    background: var(--card-bg);
    color: #202634;
    border-radius: 16px;
    padding: clamp(16px, 3vh, 28px) clamp(18px, 2.4vw, 28px) clamp(14px, 2.4vh, 24px);
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
    animation: fadeUp .6s ease .1s both;
    max-height: 100%;
    overflow: hidden;
}
/* Thin top rule in the flag's own proportions (blue 1/2, yellow 1/4,
   green 1/4) - a precise, small nod rather than a loud stripe. */
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--rw-blue) 0% 50%,
        var(--rw-yellow) 50% 75%,
        var(--rw-green) 75% 100%);
}

.login-card-badge {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #00648f;
    background: linear-gradient(135deg, #e7f6fd, #d3edfa);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: clamp(6px, 1.4vh, 12px);
}
.login-card-badge .chip-ic { stroke: #00648f; }

.login-card h2 { font-size: clamp(17px, 1vw + .8vh, 20px); margin-bottom: 5px; color: #1a2138; }
.login-card-sub { font-size: clamp(11.5px, .5vw + .5vh, 12.5px); color: #6b7385; line-height: 1.45; margin-bottom: clamp(8px, 1.6vh, 16px); }

.form-alert {
    background: #fdecea;
    border: 1px solid #f1a8a0;
    color: #a33;
    font-size: 13px;
    padding: 9px 11px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.input-box { position: relative; margin-bottom: clamp(10px, 1.8vh, 16px); }

.input-box input {
    width: 100%;
    padding: clamp(10px, 1.6vh, 13px) 12px;
    background: #f3f5f9;
    border: 1.5px solid #e3e7ef;
    outline: none;
    font-size: 15px;
    border-radius: 8px;
    color: #1a2138;
    transition: border-color .15s ease;
}
.input-box input:focus { border-color: var(--rw-blue); }

.input-box label {
    position: absolute;
    top: clamp(10px, 1.6vh, 13px);
    left: 12px;
    padding: 0 4px;
    font-size: 15px;
    color: #8a92a6;
    transition: .15s ease;
    pointer-events: none;
}
.input-box input:focus + label,
.input-box input:not(:placeholder-shown) + label {
    top: -9px;
    left: 9px;
    font-size: 11.5px;
    font-weight: 700;
    background: #fff;
    color: #00648f;
}

.btn {
    width: 100%;
    padding: clamp(10px, 1.8vh, 13px);
    background: linear-gradient(90deg, var(--rw-blue), var(--rw-blue-deep));
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    border-radius: 8px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,161,222,.4); }
.btn.shine::after {
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
}

.login-card-footer {
    margin-top: clamp(8px, 1.6vh, 14px);
    font-size: 11px;
    color: #8a92a6;
    text-align: center;
    line-height: 1.45;
}

/* ==========================================
   FOOTER - slim single bar, not a tall block
   ========================================== */
footer.contact-info {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    padding: clamp(8px, 1.6vh, 12px) clamp(16px, 5vw, 56px);
    background: rgba(4,8,20,.75);
    border-top: 1px solid rgba(255,255,255,.08);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    font-size: 12px;
    color: var(--text-dim);
}
.footer-inner strong { color: var(--text); font-weight: 600; }
.footer-inner a { color: var(--rw-blue); text-decoration: none; }
.footer-inner a:hover { text-decoration: underline; }
.footer-inner .powered-by { color: #7c87a3; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.15); }
.footer-inner .powered-by strong { color: #9aa4bf; }

@media (max-width: 640px) {
    .footer-inner { justify-content: flex-start; flex-direction: column; gap: 4px; }
    .footer-inner .powered-by { padding-left: 0; border-left: none; }
}