/*
  Carmada skin for the account pages a player reaches from the game
  (_CarmadaLayout.cshtml). A small copy of the game's cockpit theme
  (ChromeConvoy src/ChromeConvoy.Web/wwwroot/css/cockpit.css): the same
  tokens, the bordered phosphor panel, the uppercase terminal buttons.
  Copied, never linked across origins - the two sites deploy separately.

  The stock Identity pages are written against Bootstrap class names
  (row, col-md-*, form-floating, form-control, btn, text-danger...). This
  layout loads no Bootstrap, so those names are styled here directly,
  scoped under body.carmada so nothing leaks into the site's own look.
*/

:root {
    --cockpit-bg: #01120a;
    --cockpit-panel-bg: #041c10;
    --cockpit-green: #33ff77;
    --cockpit-green-dim: #1c8a49;
    --cockpit-green-bright: #8affb4;
    --cockpit-amber: #ffb000;
    --cockpit-red: #ff3b3b;
    --cockpit-glow: rgba(51, 255, 119, 0.35);
    --cockpit-font: 'Consolas', 'Courier New', monospace;
    --cockpit-dur: 160ms;
    --cockpit-dur-fast: 90ms;
    --cockpit-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --cockpit-safe-top: env(safe-area-inset-top, 0px);
    --cockpit-safe-right: env(safe-area-inset-right, 0px);
    --cockpit-safe-bottom: env(safe-area-inset-bottom, 0px);
    --cockpit-safe-left: env(safe-area-inset-left, 0px);
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--cockpit-bg);
}

body.carmada {
    font-family: var(--cockpit-font);
    color: var(--cockpit-green);
    font-size: 15px;
    line-height: 1.5;
    touch-action: manipulation;
}

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

.carmada-shell {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: calc(24px + var(--cockpit-safe-top)) calc(16px + var(--cockpit-safe-right))
             calc(24px + var(--cockpit-safe-bottom)) calc(16px + var(--cockpit-safe-left));
}

.carmada-brand {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 6px;
    text-align: center;
    color: var(--cockpit-green);
    text-shadow: 0 0 8px var(--cockpit-glow);
    margin-bottom: 16px;
}

.carmada-panel {
    background: var(--cockpit-panel-bg);
    border: 2px solid var(--cockpit-green);
    box-shadow: 0 0 12px var(--cockpit-glow) inset;
    padding: 20px;
}

.carmada-footer {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--cockpit-green-dim);
}

/* Type */
body.carmada h1,
body.carmada h2,
body.carmada h3,
body.carmada h4 {
    font-family: var(--cockpit-font);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 12px;
    line-height: 1.25;
}

body.carmada h1 { font-size: 20px; color: var(--cockpit-amber); }
body.carmada h2 { font-size: 16px; }
body.carmada h3 { font-size: 14px; color: var(--cockpit-green-dim); }
body.carmada h4 { font-size: 14px; }

body.carmada p { margin: 0 0 12px; }

body.carmada hr {
    border: 0;
    border-top: 1px dashed var(--cockpit-green-dim);
    margin: 16px 0;
}

body.carmada a {
    color: var(--cockpit-green-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.carmada a:hover,
body.carmada a:focus-visible {
    color: var(--cockpit-amber);
}

/* Layout: Bootstrap's grid collapses to one column here - the panel is
   narrow on every screen, which is the point. */
body.carmada .row { display: block; }
body.carmada [class*="col-"] { width: 100%; max-width: 100%; margin: 0; padding: 0; }
body.carmada [class*="col-"] + [class*="col-"] { margin-top: 20px; }
body.carmada .mb-3 { margin-bottom: 14px; }

/* Fields. form-floating puts the label after the input in the markup;
   column-reverse shows it above, like the game's own labelled inputs. */
body.carmada .form-floating {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
}

body.carmada label,
body.carmada .form-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cockpit-green-dim);
}

body.carmada .form-control,
body.carmada input[type="text"],
body.carmada input[type="email"],
body.carmada input[type="password"],
body.carmada input[type="tel"] {
    width: 100%;
    font-family: var(--cockpit-font);
    /* 16px stops iOS Safari zooming the page on focus. */
    font-size: 16px;
    background: #000;
    color: var(--cockpit-green);
    border: 1px solid var(--cockpit-green);
    border-radius: 0;
    padding: 8px 10px;
    transition: border-color var(--cockpit-dur) var(--cockpit-ease),
                box-shadow var(--cockpit-dur) var(--cockpit-ease);
}

body.carmada .form-control::placeholder { color: transparent; }

body.carmada .form-control:focus,
body.carmada input:focus {
    outline: none;
    border-color: var(--cockpit-green-bright);
    box-shadow: 0 0 8px var(--cockpit-glow);
}

body.carmada .checkbox label,
body.carmada .form-check-label {
    text-transform: none;
    letter-spacing: 0;
    color: var(--cockpit-green);
    font-size: 14px;
}

body.carmada .form-check-input,
body.carmada input[type="checkbox"] {
    accent-color: var(--cockpit-green);
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
}

body.carmada .form-text,
body.carmada .carmada-hint {
    font-size: 13px;
    color: var(--cockpit-green-dim);
}

/* Buttons: the cockpit's terminal key. */
body.carmada .btn,
body.carmada button,
body.carmada .carmada-button {
    display: inline-block;
    font-family: var(--cockpit-font);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    text-align: center;
    background: #000;
    color: var(--cockpit-green);
    border: 1px solid var(--cockpit-green);
    border-radius: 0;
    padding: 10px 14px;
    margin: 0 6px 6px 0;
    cursor: pointer;
    transition: background-color var(--cockpit-dur) var(--cockpit-ease),
                color var(--cockpit-dur) var(--cockpit-ease),
                box-shadow var(--cockpit-dur) var(--cockpit-ease),
                translate var(--cockpit-dur-fast) var(--cockpit-ease);
}

body.carmada .btn-primary,
body.carmada .carmada-button-primary {
    border-width: 2px;
}

body.carmada .w-100,
body.carmada .carmada-button-wide {
    display: block;
    width: 100%;
    margin-right: 0;
}

body.carmada .btn:hover,
body.carmada button:hover,
body.carmada .carmada-button:hover {
    background: var(--cockpit-green-dim);
    color: var(--cockpit-bg);
    box-shadow: 0 0 8px var(--cockpit-glow);
}

body.carmada .btn:active,
body.carmada button:active,
body.carmada .carmada-button:active {
    background: var(--cockpit-green);
    color: var(--cockpit-bg);
    box-shadow: none;
    translate: 0 1px;
    transition-duration: var(--cockpit-dur-fast);
}

body.carmada .btn:focus-visible,
body.carmada button:focus-visible,
body.carmada .carmada-button:focus-visible {
    outline: 2px solid var(--cockpit-amber);
    outline-offset: 2px;
}

/* A button styled as a link (the interstitial's "Use another account"). */
body.carmada button.carmada-link-button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--cockpit-green-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: none;
    letter-spacing: 0;
}

body.carmada button.carmada-link-button:hover {
    background: none;
    color: var(--cockpit-amber);
    box-shadow: none;
}

/* Messages. */
body.carmada .text-danger,
body.carmada .field-validation-error,
body.carmada .validation-summary-errors {
    color: var(--cockpit-red);
    font-size: 14px;
}

body.carmada .validation-summary-errors ul,
body.carmada .validation-summary-valid ul {
    margin: 0 0 12px;
    padding-left: 18px;
}

body.carmada .validation-summary-valid { display: none; }

body.carmada .alert {
    border: 1px solid var(--cockpit-amber);
    color: var(--cockpit-amber);
    padding: 10px 12px;
    margin: 0 0 14px;
}

body.carmada .alert-danger {
    border-color: var(--cockpit-red);
    color: var(--cockpit-red);
}

body.carmada .alert .btn-close { display: none; }

body.carmada .carmada-callout {
    border-left: 3px solid var(--cockpit-amber);
    padding: 6px 10px;
    margin: 0 0 14px;
    color: var(--cockpit-amber);
}

body.carmada .carmada-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

body.carmada .carmada-actions > *,
body.carmada .carmada-actions button { margin: 0; }

/* Paragraph spacing for the hints under a button group. */
body.carmada .carmada-spaced { margin-top: 14px; }

/* Off-screen but still in the form: the registration honeypot (a bot fills it,
   a person never sees it). Not display:none, which some bots skip. Same name
   and effect as Bootstrap's own class, so the honeypot is hidden in the site
   layout too. Hidden from assistive tech by aria-hidden on the wrapper. */
body.carmada .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 420px) {
    .carmada-shell {
        padding: calc(12px + var(--cockpit-safe-top)) calc(16px + var(--cockpit-safe-right))
                 calc(16px + var(--cockpit-safe-bottom)) calc(16px + var(--cockpit-safe-left));
    }

    .carmada-panel { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    body.carmada * { transition: none !important; }
}