/* =========================================================================
   Public surface design system
   =========================================================================

   Every rule is scoped under .ei-app, the wrapper the layout puts around our
   page content. Nothing here uses a bare element selector, so these styles
   cannot reach a tenant's own header, footer or markup — and a tenant styling
   their own site cannot accidentally be overridden by us outside our block.

   The classes are deliberately generic. A button is .ei-btn wherever it
   appears; there is no .ei-login-button or .ei-register-title. Every screen in
   the end-user journey — sign in, register, induction, completion — draws from
   this same set, so the presentation stays consistent as pages are added.

   Tenants restyle by overriding the custom properties on .ei-app rather than
   rewriting rules. Colours default to the tenant's branding.
   ========================================================================= */

.ei-app {
    /* ---- palette (inherits tenant branding where set) ---- */
    --ei-primary: var(--brand-primary, #0d6efd);
    --ei-primary-hover: var(--brand-accent, #0b5ed7);
    --ei-on-primary: #fff;

    --ei-text: #1f2430;
    --ei-muted: #667085;
    --ei-heading: #101828;

    --ei-surface: #fff;
    --ei-surface-sunken: #f7f8fa;
    --ei-border: #d8dce3;
    --ei-border-strong: #b7bec9;

    --ei-danger: #b42318;
    --ei-danger-bg: #fef3f2;
    --ei-success: #027a48;
    --ei-success-bg: #ecfdf3;
    --ei-warn: #b54708;
    --ei-warn-bg: #fffaeb;
    --ei-info: #175cd3;
    --ei-info-bg: #eff8ff;

    /* ---- shape and rhythm ---- */
    --ei-radius: 6px;
    --ei-radius-lg: 10px;

    --ei-space-1: 4px;
    --ei-space-2: 8px;
    --ei-space-3: 12px;
    --ei-space-4: 16px;
    --ei-space-5: 24px;
    --ei-space-6: 32px;
    --ei-space-7: 48px;

    --ei-control-height: 44px;   /* comfortable on a phone */
    --ei-measure: 32rem;         /* readable line length for forms */

    --ei-font: inherit;          /* follow the tenant's wrapper by default */
    --ei-font-size: 16px;        /* 16px avoids iOS zoom-on-focus */
    --ei-line: 1.5;

    --ei-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);

    box-sizing: border-box;
    color: var(--ei-text);
    font-family: var(--ei-font);
    font-size: var(--ei-font-size);
    line-height: var(--ei-line);
}

.ei-app *,
.ei-app *::before,
.ei-app *::after {
    box-sizing: inherit;
}

/* ---------------------------------------------------------------- layout */

.ei-app .ei-view {
    padding: var(--ei-space-6) var(--ei-space-4);
}

/* Centres a single column — the shape every form in the journey uses. */
.ei-app .ei-centered {
    display: flex;
    justify-content: center;
}

.ei-app .ei-column {
    width: 100%;
    max-width: var(--ei-measure);
}

.ei-app .ei-panel {
    background: var(--ei-surface);
    border: 1px solid var(--ei-border);
    border-radius: var(--ei-radius-lg);
    box-shadow: var(--ei-shadow);
    padding: var(--ei-space-6);
}

@media (max-width: 30rem) {
    .ei-app .ei-view { padding: var(--ei-space-4) var(--ei-space-3); }
    .ei-app .ei-panel { padding: var(--ei-space-4); }
}

/* Vertical rhythm. Applied to a container, spaces its children evenly. */
.ei-app .ei-stack > * + * { margin-top: var(--ei-space-4); }
.ei-app .ei-stack-sm > * + * { margin-top: var(--ei-space-2); }
.ei-app .ei-stack-lg > * + * { margin-top: var(--ei-space-6); }

/* Two columns that fold to one on a narrow screen. */
.ei-app .ei-grid {
    display: grid;
    gap: var(--ei-space-4);
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .ei-app .ei-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------ typography */

.ei-app .ei-title,
.ei-app .ei-subtitle,
.ei-app .ei-section-title {
    color: var(--ei-heading);
    margin: 0;
    line-height: 1.25;
}

.ei-app .ei-title { font-size: 1.5rem; font-weight: 650; }
.ei-app .ei-section-title { font-size: 1.125rem; font-weight: 650; }

.ei-app .ei-subtitle {
    color: var(--ei-muted);
    font-size: .9375rem;
    font-weight: 400;
    margin-top: var(--ei-space-1);
}

.ei-app .ei-text { margin: 0; }
.ei-app .ei-muted { color: var(--ei-muted); font-size: .875rem; }

.ei-app .ei-link {
    color: var(--ei-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ei-app .ei-link:hover { color: var(--ei-primary-hover); }

/* ----------------------------------------------------------------- forms */

.ei-app .ei-field { display: block; }

.ei-app .ei-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: var(--ei-space-1);
}

/* One control class for every input type, so they cannot drift apart. */
.ei-app .ei-control {
    background: var(--ei-surface);
    border: 1px solid var(--ei-border);
    border-radius: var(--ei-radius);
    color: var(--ei-text);
    display: block;
    font: inherit;
    min-height: var(--ei-control-height);
    padding: var(--ei-space-2) var(--ei-space-3);
    width: 100%;
}

.ei-app textarea.ei-control { min-height: 7rem; resize: vertical; }

.ei-app .ei-control::placeholder { color: var(--ei-muted); }

.ei-app .ei-control:hover { border-color: var(--ei-border-strong); }

.ei-app .ei-control:focus,
.ei-app .ei-control:focus-visible {
    border-color: var(--ei-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ei-primary) 25%, transparent);
    outline: none;
}

.ei-app .ei-control:disabled {
    background: var(--ei-surface-sunken);
    color: var(--ei-muted);
    cursor: not-allowed;
}

.ei-app .ei-hint {
    color: var(--ei-muted);
    display: block;
    font-size: .8125rem;
    margin-top: var(--ei-space-1);
}

.ei-app .ei-error {
    color: var(--ei-danger);
    display: block;
    font-size: .8125rem;
    margin-top: var(--ei-space-1);
}

/* Invalid state, driven by jQuery validation's class. */
.ei-app .ei-control.input-validation-error {
    border-color: var(--ei-danger);
}

.ei-app .ei-control.input-validation-error:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ei-danger) 22%, transparent);
}

.ei-app .field-validation-error { color: var(--ei-danger); font-size: .8125rem; }
.ei-app .field-validation-valid { display: none; }

/* Checkbox / radio row. */
.ei-app .ei-check {
    align-items: center;
    display: flex;
    gap: var(--ei-space-2);
}

.ei-app .ei-check input {
    accent-color: var(--ei-primary);
    height: 1.125rem;
    margin: 0;
    width: 1.125rem;
}

.ei-app .ei-check label { font-size: .9375rem; margin: 0; }

/* --------------------------------------------------------------- buttons */

.ei-app .ei-btn {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ei-radius);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    gap: var(--ei-space-2);
    justify-content: center;
    line-height: 1;
    min-height: var(--ei-control-height);
    padding: var(--ei-space-3) var(--ei-space-5);
    text-align: center;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease;
}

.ei-app .ei-btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ei-primary) 30%, transparent);
    outline: none;
}

.ei-app .ei-btn:disabled { cursor: not-allowed; opacity: .55; }

.ei-app .ei-btn-primary {
    background: var(--ei-primary);
    border-color: var(--ei-primary);
    color: var(--ei-on-primary);
}

.ei-app .ei-btn-primary:hover:not(:disabled) {
    background: var(--ei-primary-hover);
    border-color: var(--ei-primary-hover);
}

.ei-app .ei-btn-secondary {
    background: var(--ei-surface);
    border-color: var(--ei-border-strong);
    color: var(--ei-text);
}

.ei-app .ei-btn-secondary:hover:not(:disabled) { background: var(--ei-surface-sunken); }

.ei-app .ei-btn-ghost { color: var(--ei-primary); padding-left: 0; padding-right: 0; }
.ei-app .ei-btn-ghost:hover:not(:disabled) { color: var(--ei-primary-hover); text-decoration: underline; }

.ei-app .ei-btn-block { display: flex; width: 100%; }

/* Groups the buttons that end a form. */
.ei-app .ei-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ei-space-3);
}

.ei-app .ei-actions-end { justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
    .ei-app .ei-btn { transition: none; }
}

/* ---------------------------------------------------------------- notices */

.ei-app .ei-alert {
    border: 1px solid transparent;
    border-radius: var(--ei-radius);
    font-size: .9375rem;
    padding: var(--ei-space-3) var(--ei-space-4);
}

.ei-app .ei-alert-info { background: var(--ei-info-bg); border-color: var(--ei-info); color: var(--ei-info); }
.ei-app .ei-alert-success { background: var(--ei-success-bg); border-color: var(--ei-success); color: var(--ei-success); }
.ei-app .ei-alert-error { background: var(--ei-danger-bg); border-color: var(--ei-danger); color: var(--ei-danger); }
.ei-app .ei-alert-warn { background: var(--ei-warn-bg); border-color: var(--ei-warn); color: var(--ei-warn); }

.ei-app .ei-alert ul { margin: var(--ei-space-1) 0 0; padding-left: var(--ei-space-5); }

/* A rule with a caption, for "or continue with". */
.ei-app .ei-divider {
    align-items: center;
    color: var(--ei-muted);
    display: flex;
    font-size: .8125rem;
    gap: var(--ei-space-3);
}

.ei-app .ei-divider::before,
.ei-app .ei-divider::after {
    background: var(--ei-border);
    content: "";
    flex: 1;
    height: 1px;
}

/* ------------------------------------------------------------ small bits */

.ei-app .ei-badge {
    background: var(--ei-surface-sunken);
    border-radius: 999px;
    color: var(--ei-muted);
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    padding: var(--ei-space-1) var(--ei-space-3);
}

.ei-app .ei-code {
    background: var(--ei-surface-sunken);
    border: 1px solid var(--ei-border);
    border-radius: var(--ei-radius);
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    overflow-wrap: anywhere;
    padding: var(--ei-space-3);
}

.ei-app .ei-list { list-style: none; margin: 0; padding: 0; }

.ei-app .ei-list-item {
    border-bottom: 1px solid var(--ei-border);
    padding: var(--ei-space-3) 0;
}

.ei-app .ei-list-item:last-child { border-bottom: 0; }

/* Steps through a multi-page process — inductions will use this. */
.ei-app .ei-steps {
    color: var(--ei-muted);
    display: flex;
    font-size: .8125rem;
    gap: var(--ei-space-2);
    list-style: none;
    margin: 0 0 var(--ei-space-4);
    padding: 0;
}

.ei-app .ei-step-current { color: var(--ei-primary); font-weight: 600; }

.ei-app .ei-hidden { display: none; }