:root {
    /* Change these in one place to update font colors across the site */
    --text-color: #111;            /* general text */
    --heading-color: #0b2239;      /* h1–h6 */
    --link-color: #0d6efd;         /* links */
    --link-hover-color: #0a58ca;   /* link hover */
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: gray;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 100vh;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}

.gray-div {
    background-color: #d3d3d3;
    /* Fluid rather than a percentage with a cap, because the two together used
       to disagree with the phone breakpoint below and the card got *narrower*
       as the screen did: 75% of a 390px phone is 293px, and the breakpoint then
       cut it to 50% — a 195px card with 98px of empty grey either side, while
       the same page at 481px showed a 361px card. min() states the intent
       directly: take almost the whole width, but never grow past 480px. The
       progression is now monotonic from 320px up, and identical to before on
       any screen wide enough to hit the cap. */
    width: min(92%, 480px);
    margin: 50px auto;
    padding: 40px;
    border-radius: 20px;
    text-align: left;
    box-sizing: border-box;
    position: relative;
}

footer {
    width: 100%;
    align-self: stretch;
    margin-top: auto;
    text-align: center;
}

.gray-div div {
    text-align: left;
    margin-bottom: 15px;
}

.gray-div label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    color: var(--text-color);
}

.gray-div input[type="text"],
.gray-div input[type="password"] {
    width: 100%;
    padding: 8px;
    display: block;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .gray-div {
        /* No width here: the base rule's min() already handles narrow screens,
           and overriding it is what broke them. Phones still get tighter
           spacing, which is all this breakpoint was ever needed for. */
        margin: 20px auto;
        padding: 24px 16px;
        border-radius: 12px;
    }
    .name-row { flex-direction: column; }
}
.panel-icons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.icon-wrapper {
    position: static;
    width: clamp(48px, 10vw, 48px);
    height: clamp(48px, 10vw, 48px);
}
.icon-wrapper img {
    width: clamp(48px, 10vw, 48px);
    height: clamp(48px, 10vw, 48px);
    display: block; /* avoid layout shifts around the fixed container */
}

/* Profile icon — scales from 16px (mobile) to 20px (desktop) */
.profile-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.profile-icon {
    width: clamp(18px, 3.375vw, 22.5px);
    height: clamp(18px, 3.375vw, 22.5px);
    cursor: pointer;
}

.profile-tooltip {
    position: absolute;
    top: 40px; /* below the icon */
    right: -5px;
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    display: none;
    pointer-events: none;
    z-index: 9999;
}

.btn-cancel {
    display: inline-block;
    padding: 8px 16px;
    background-color: #555;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 10px;
}

.btn-cancel:hover {
    background-color: #444;
}

.btn-save {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 5px;
}

.btn-save:hover {
    background-color: #0069d9;
}

.admin-settings-group {
    margin-bottom: 18px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.section-title {
    font-weight: 700;
    margin: 0;
}

.section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    background: #f8f9fa;
    color: #0b2239;
    border: 1px solid #b9c1ca;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
}

.section-toggle:hover {
    background: #eef2f6;
    border-color: #7f8a97;
}

.toggle-icon {
    display: inline-flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

.row-2 { display:flex; gap:8px; margin-top:6px; flex-wrap: wrap; }
.row-2 > div { flex:1; min-width: 120px; }

.row-3 { display:flex; gap:8px; margin-top:6px; flex-wrap: wrap; }
.row-3 > div { flex:1; min-width: 80px; }

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 20px; /* Puts a fixed space between the text label and the white input */
 }

.form-row label {
    font-weight: bold;
    min-width: 90px; /* Keeps "Username" and "Password" aligned perfectly */
}

/* Give your white input fields a fixed, defined width */
.form-row input {
    width: 150px;
    padding: 8px;
    border: 1px solid #ccc;
}

/* Cookie consent banner — hidden until JS opts it in.
 *
 * Deliberately not positioned. It was fixed, then sticky, and both cost the
 * login page its "Forgot your password?" and "Register" links: a bar pinned to
 * the bottom of the viewport covers whatever the bottom of the viewport happens
 * to land on, and the bar is opaque and reads as page furniture rather than as
 * an overlay, so the effect is a link you can see, click, and get nothing from.
 * Fixed was the worse of the two — it reserved no height, so no scroll position
 * uncovered the link at all — but sticky still ate the links on every window
 * under about 600px tall, which is any laptop with a short window and any phone
 * held sideways.
 *
 * In the flow it cannot cover anything, and it still lands where it used to on
 * a normal window: body is a flex column with min-height:100vh and footer takes
 * margin-top:auto, so the footer and this bar after it are pushed to the bottom
 * of the screen anyway. Pinning was doing no work there. On a window too short
 * for the page it now sits below the content instead of on top of it, so you
 * reach it by scrolling — the right way round, since a cookie notice you scroll
 * to costs less than a login you cannot use.
 *
 * z-index still applies: this is a flex item, and it keeps the bar painting
 * above the absolutely-positioned profile tooltip as it did before. */
.cookie-consent {
    display: none;
    z-index: 10000;
    background: #0b2239;
    color: #fff;
    padding: 14px 20px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.cookie-consent.cookie-consent-open {
    display: flex;
}

.cookie-consent-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    max-width: 720px;
}

.cookie-consent-accept {
    padding: 8px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.cookie-consent-accept:hover {
    background-color: #0069d9;
}