/* IoT Workshop - authentication pages. */

:root {
    --page-bg: #f7f8fa;
    --card-bg: #ffffff;
    --border: #e4e7ec;
    --input-border: #d0d5dd;
    --text: #101828;
    --text-muted: #475467;
    --placeholder: #98a2b3;
    --brand: #1857b6;
    --green: #57bd6d;
    --green-hover: #4aab60;
    --danger: #b42318;
    --danger-bg: #fef3f2;
    --success: #067647;
    --success-bg: #ecfdf3;
    --radius: 10px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body.auth-body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Takes the space the header and footer leave, rather than a full
       viewport of its own - which would push the footer off-screen. */
    flex: 1;
    padding: 40px 16px;
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 48px 44px 40px;
    text-align: center;
}

/* Brand */
/* Sized to match the signed-in header, so the brand does not shrink on the
   way from the sign-in card into the app. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 44px;
    text-decoration: none;
    color: var(--brand);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--brand);
    box-shadow: 7px 7px 0 -1px rgba(24, 87, 182, 0.35);
}

/* Typography */
.auth-title {
    margin: 0 0 10px;
    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.auth-title-sm { font-size: 32px; }

.auth-subtitle {
    margin: 0 0 32px;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.5;
}

/* Form */
.auth-form { text-align: left; }

.field { margin-bottom: 20px; }

.label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.label-link { font-size: 14px; font-weight: 600; }

.input {
    width: 100%;
    padding: 13px 14px;
    font-size: 16px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    outline: none;
}

.input::placeholder { color: var(--placeholder); }

.input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(24, 87, 182, 0.12);
}

.input.has-error { border-color: var(--danger); }

.input-group { position: relative; }

.input-group .input { padding-right: 46px; }

.toggle-password {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    padding: 6px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--placeholder);
    cursor: pointer;
}

.toggle-password svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toggle-password .eye-slash { display: none; }
.toggle-password[aria-pressed="true"] .eye-slash { display: block; }

/* Checkbox */
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 24px;
    font-size: 15px;
    color: var(--text);
    cursor: pointer;
}

.checkbox input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--green);
    flex: none;
}

/* Buttons */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-hover); }

.btn-secondary {
    margin-top: 12px;
    background: #fff;
    color: var(--text);
    border-color: var(--input-border);
}

.btn-secondary:hover { background: #f9fafb; }

.btn[disabled] { opacity: 0.65; cursor: not-allowed; }

.btn-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Links */
.link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.link:hover { text-decoration: underline; }

.link-back { display: inline-flex; align-items: center; gap: 8px; }

.auth-foot {
    margin: 26px 0 0;
    font-size: 15px;
    color: var(--text-muted);
}

/* Messages */
.alert {
    margin-bottom: 20px;
    padding: 12px 14px;
    font-size: 14px;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 8px;
}

.alert-error { color: var(--danger); background: var(--danger-bg); border-color: #fecdca; }
.alert-success { color: var(--success); background: var(--success-bg); border-color: #abefc6; }

.field-error {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--danger);
}

/* Verification icon */
.icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: #eaf1fb;
    color: var(--brand);
}

.icon-badge svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-badge .check { stroke-width: 2.2; }

/* Mobile */
@media (max-width: 560px) {
    .auth-wrap { padding: 20px 12px; }
    .auth-card { padding: 32px 22px 28px; border-radius: 12px; }
    .auth-title { font-size: 30px; }
    .auth-title-sm { font-size: 26px; }
    .auth-subtitle { font-size: 15px; margin-bottom: 26px; }
    .brand { margin-bottom: 30px; }
    .input, .btn { font-size: 16px; }
}

/* ------------------------------------------------------------------
   Site header and footer

   The card used to be the whole page, which left anyone who landed on
   Sign in with no way back to the site. The header and footer are that
   way back. They stay deliberately plain - this page is the card - and
   are built from the tokens above rather than by pulling in admin.css,
   which declares the same custom properties with different values.
   ------------------------------------------------------------------ */

/* Header, card and footer stack, with the card taking the slack so the
   footer sits on the bottom edge on a short page.

   The shell inset and gutter mirror home.css, so the brand here starts on
   the same boundary as the brand on the public pages: 40px of outer inset
   plus the bar's own 28px, stepping down together at each breakpoint. */
body.auth-body {
    --shell-inset: 40px;
    --shell-max: 1680px;
    --bar-gutter: 28px;

    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-left: var(--shell-inset);
    padding-right: var(--shell-inset);
}

/* box-sizing: border-box (top of this file) keeps the padding inside
   100vw, so the inset cannot introduce horizontal scrolling. */
.auth-body > .auth-topbar,
.auth-body > .auth-wrap,
.auth-body > .auth-footer {
    width: 100%;
    max-width: var(--shell-max);
    margin-left: auto;
    margin-right: auto;
}

/* body.auth-body, matching where the values are declared: a bare
   .auth-body loses to it and the breakpoints would never apply. */
@media (max-width: 980px) {
    body.auth-body { --shell-inset: 20px; --bar-gutter: 16px; }
}

@media (max-width: 640px) {
    body.auth-body { --shell-inset: 12px; }
}

@media (max-width: 420px) {
    body.auth-body { --shell-inset: 8px; }
}

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px var(--bar-gutter);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

/* The bars keep their content on the boundary above but let their surface
   run to the browser edge, as the public shell does. The first shadow
   paints that surface, pushed clear of the bar by the spread plus 1px so
   the second shadow's border colour shows as the rule continuing the
   bar's own border; clip-path holds the bleed to the bar's height.
   Neither shadow nor clip-path adds scrollable overflow. */
.auth-body > .auth-topbar {
    box-shadow:
        0 calc(-100vmax - 1px) 0 100vmax var(--card-bg),
        0 0 0 100vmax var(--border);
    clip-path: inset(0 -100vmax);
}

.auth-body > .auth-footer {
    box-shadow:
        0 calc(100vmax + 1px) 0 100vmax var(--card-bg),
        0 0 0 100vmax var(--border);
    clip-path: inset(0 -100vmax);
}

/* The brand carries .brand for its type and mark; in the header it is a
   row of its own, so it drops the space the card version kept under it. */
.auth-brand { margin-bottom: 0; }

.auth-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px var(--bar-gutter);
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.auth-footer-copy { margin-left: 10px; color: var(--text-muted); }
.auth-footer-links { display: flex; flex-wrap: wrap; gap: 14px 18px; }

.auth-footer-links a {
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
}

.auth-footer-links a:hover { color: var(--text); }

@media (max-width: 560px) {
    .auth-topbar { padding: 12px var(--bar-gutter); }
    .auth-footer { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px var(--bar-gutter); }
}