/* Organiser sign-in shell (views/organizerAuth/layout.ejs): poster on the left, branded panel
   on the right. Shared by every /o/<slug> page; page-specific rules belong in the panel, not here.
   Standalone page: no Bootstrap or AdminLTE is loaded. */
:root {
    --oa-text: #1a1a1a;
    --oa-muted: #666666;
    --oa-border: #d9d9d9;
    --oa-focus: #1a1a1a;
    --oa-accent: #dc354b;
    --oa-accent-dark: #c02a3f;
    --oa-disabled-bg: #e5e5e5;
    --oa-disabled-text: #7a7a7a;
    --oa-success: #1e8e3e;
    --oa-radius: 8px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body.oa {
    display: flex;
    min-height: 100vh;
    background: #ffffff;
    color: var(--oa-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

/* ---------- poster ---------- */

.oa-poster {
    flex: 1 1 50%;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #fff;
}

/* The poster is drawn straight from the HTML, no fade; the white ground shows while it arrives. Without a poster, or
   when it fails, the side stays plain white (.is-blank; orchestration/signin-no-default-brand/). */
.oa-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The banner's copyright line (orchestration/banner-copyright/): a quiet caption at the bottom of the picture. A light,
   low fade and a fine shadow keep it readable on light and dark posters without a dark block; the whole text, wrapped,
   never cut. The same on phones. */
.oa-copyright {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 36px 32px 16px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .38));
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    letter-spacing: .01em;
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 8px rgba(0, 0, 0, .25);
    overflow-wrap: anywhere;
    /* Above the zoomed default art on phones (a transform). */
    z-index: 1;
}

.oa-copyright[hidden] {
    display: none;
}

/* A light picture (poster.js reads it): the same soft fade, a little taller and deeper, since a near-white picture
   gives the white text less to stand on. No edge, no blur. */
.oa-poster.is-light .oa-copyright {
    padding-top: 56px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, .55));
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 10px rgba(0, 0, 0, .35);
}

/* No picture: the white side is set off from the panel by a thin grey line, the invite page's border colour. */
.oa-poster.is-blank {
    border-right: 1px solid #e6e9ee;
}

/* No picture: plain grey text on the white side, no fade. */
.oa-poster.is-blank .oa-copyright {
    background: none;
    color: #6b6f7b;
    text-shadow: none;
}

/* ---------- panel ---------- */

.oa-panel {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 32px 24px 24px;
}

.oa-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.oa-brand {
    text-align: center;
    margin-bottom: 20px;
}

.oa-logo {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    object-fit: contain;
    border-radius: 10px;
}

/* Keeps its space, unseen, until the logo has loaded (organizerAuth/poster.js), so the form never moves. */
.oa-logo.is-loading {
    visibility: hidden;
}

.oa-name {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
}

/* ---------- panel content ---------- */

.oa-section[hidden] {
    display: none;
}

.oa-center {
    text-align: center;
}

.oa-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
}

/* A step's heading takes focus so screen readers announce the step; it is not a control, so no focus ring. */
.oa-title[tabindex="-1"]:focus {
    outline: none;
}

.oa-text {
    margin: 0 0 24px;
    color: var(--oa-muted);
}

.oa-text strong {
    color: var(--oa-text);
    font-weight: 600;
}

.oa-state-icon {
    display: block;
    margin-bottom: 16px;
    color: var(--oa-muted);
    font-size: 40px;
}

.oa-state-icon.oa-success-icon {
    color: var(--oa-success);
}

/* ---------- form ---------- */

.oa-field {
    margin-bottom: 20px;
}

.oa-label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
}

.oa-required {
    color: var(--oa-accent);
}

.oa-input-wrap {
    position: relative;
}

.oa-input {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 12px;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius);
    color: var(--oa-text);
    font: inherit;
    background: #ffffff;
}

.oa-input::placeholder {
    color: #9a9a9a;
}

.oa-input:focus {
    outline: none;
    border-color: var(--oa-focus);
}

.oa-field.oa-invalid .oa-input {
    border-color: var(--oa-accent);
}

.oa-otp {
    display: flex;
    gap: 8px;
}

.oa-otp-box {
    flex: 1 1 0;
    min-width: 0;
    max-width: 52px;
    padding: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.oa-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 48px;
    border: 0;
    background: none;
    color: var(--oa-muted);
    cursor: pointer;
}

.oa-field-error {
    margin: 6px 0 0;
    color: var(--oa-accent);
    font-size: 14px;
}

.oa-field-error:empty {
    display: none;
}

.oa-rules {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: var(--oa-muted);
    font-size: 13px;
}

.oa-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.oa-rules li::before {
    content: "\f10c";
    font-family: FontAwesome;
    font-size: 12px;
}

.oa-rules li.oa-met {
    color: var(--oa-success);
}

.oa-rules li.oa-met::before {
    content: "\f058";
}

.oa-alert {
    margin: 0 0 20px;
    padding: 10px 12px;
    border-radius: var(--oa-radius);
    background: #fdeef0;
    color: var(--oa-accent-dark);
    font-size: 14px;
}

.oa-alert:empty {
    display: none;
}

.oa-button {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 28px;
    border: 0;
    border-radius: var(--oa-radius);
    background: var(--oa-accent);
    color: #ffffff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.oa-button:hover:not(:disabled) {
    background: var(--oa-accent-dark);
}

.oa-button:disabled {
    background: var(--oa-disabled-bg);
    color: var(--oa-disabled-text);
    cursor: not-allowed;
}

/* The 404 page: its paragraph already ends with the gap a button would add. */
.oa-notfound .oa-button {
    margin-top: 0;
}

.oa-link {
    display: block;
    margin-top: 20px;
    color: var(--oa-accent);
    text-align: center;
    text-decoration: none;
}

.oa-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-bottom: 16px;
    border: 3px solid var(--oa-disabled-bg);
    border-top-color: var(--oa-accent);
    border-radius: 50%;
    animation: oa-spin .8s linear infinite;
}

@keyframes oa-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- small screens: the poster is a banner above the panel ---------- */

@media (max-width: 767px) {
    body.oa {
        flex-direction: column;
    }

    .oa-poster {
        flex: none;
        position: relative;
        height: 220px;
    }

    .oa-poster.is-blank {
        border-right: 0;
        border-bottom: 1px solid #e6e9ee;
    }

    .oa-copyright {
        padding: 24px 16px 10px;
        font-size: 11px;
    }

    /* The default Accred art's logo and title sit about a third of the way down; zoom in on them for a short
       banner. Only that art: organiser and event posters are not zoomed (the rule follows the img's src). */
    .oa-poster img[src$="/accred-login-new-bg.jpg"] {
        object-position: 50% 35%;
        transform: scale(1.7);
        transform-origin: 50% 35%;
    }

    .oa-panel {
        min-height: 0;
        padding: 24px 16px 16px;
    }

    .oa-card {
        justify-content: flex-start;
    }

    .oa-brand {
        margin-bottom: 28px;
    }

    .oa-logo {
        width: 72px;
        height: 72px;
    }

    .oa-name {
        font-size: 22px;
    }
}

/* ---------- sign-in (panels/login.ejs) ---------- */

/* The shell's display rules (.oa-link, .oa-logo, .oa-spinner …) would otherwise beat the hidden attribute */
.oa [hidden] {
    display: none !important;
}

.oa-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.oa-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--oa-accent);
    font: inherit;
    cursor: pointer;
}

.oa-link-button:disabled {
    color: var(--oa-disabled-text);
    cursor: default;
}

/* Block links below a form (Forgot password, Back to sign in) */
.oa-link.oa-link-button {
    width: 100%;
}

.oa-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding: 10px 12px;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius);
}

.oa-account-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.oa-code {
    letter-spacing: .4em;
    font-variant-numeric: tabular-nums;
}

.oa-code::placeholder {
    letter-spacing: normal;
}

.oa-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

/* Records step filter (login.js resetRecordsSearch), shown for long lists only */
.oa-search {
    margin-bottom: 12px;
}

.oa-choices {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

/* A long list (dozens of companies or events) scrolls by itself, about 3½ rows high (the cut row hints at more), so the title, search box and Back stay put
   instead of the whole page scrolling. The padding keeps the choices' focus ring inside the scroll box. */
#loginEvents,
#loginRecords {
    max-height: min(36vh, 300px);
    overflow-y: auto;
    margin-left: -4px;
    margin-right: -4px;
    padding: 4px;
}

/* A searchable list keeps one height whatever the filter leaves, inside a bordered scroll box */
#loginRecords.oa-choices-scroll {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: min(36vh, 300px);
    margin-left: 0;
    margin-right: 0;
    padding: 8px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #FAFAFB;
}

/* Shown in the middle of the list box when the search leaves nothing */
#loginRecords.oa-choices-scroll li.oa-choices-none {
    margin: auto;
    color: #6B7280;
    font-size: 14px;
    text-align: center;
}

/* gap spaces the rows; li + li margins would count the filtered-out (hidden) rows */
#loginRecords.oa-choices-scroll li + li {
    margin-top: 0;
}

.oa-choices li + li {
    margin-top: 12px;
}

.oa-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius);
    background: #ffffff;
    color: var(--oa-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.oa-choice:hover,
.oa-choice:focus-visible {
    border-color: var(--oa-accent);
    background: #fdeef0;
    outline: none;
}

.oa-choice-logo {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.oa-choice-text {
    flex: 1;
    min-width: 0;
}

.oa-choice-title {
    display: block;
    font-weight: 600;
}

.oa-choice-sub {
    display: block;
    margin-top: 2px;
    color: var(--oa-muted);
    font-size: 14px;
}

.oa-choice-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8f5ec;
    color: var(--oa-success);
    font-size: 12px;
    font-weight: 600;
}

.oa-choice-chevron {
    color: var(--oa-muted);
    font-size: 20px;
}

/* .oa-button on a link (set-password success: Login) */
a.oa-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

a.oa-button:hover,
a.oa-button:focus {
    color: #ffffff;
    text-decoration: none;
}