/*
   The ATP360 look for the identity pages, matching ATP360.Frontend/src/index.css and
   src/auth/LoginPage.module.css so the last screen of signup and the first screen of the product do not
   look like two different systems.

   This file is linked by _Layout.cshtml only when IIdentityThemeResolver resolves the request to ATP360,
   and every rule is scoped under .theme-atp360. Workspace360 and Clarity360 never load it.

   Two things force the shape of the selectors here. main.scss nests the page wrapper four levels deep, so
   an override has to repeat that chain to outrank it, and register-shared.css sets the card backgrounds
   with !important, so those overrides carry !important too. Neither is a preference.
*/

.theme-atp360 {
    --atp-page: #0b0f1a;
    --atp-card: #101b2d;
    --atp-border: #27186c;
    --atp-blue: #006ff8;
    --atp-blue-hover: #0060d8;
    --atp-text: #ffffff;
    --atp-text-muted: #a0aec0;
    /* The product's blue, lightened until it clears 4.5:1 on the card. #006ff8 itself is the button
       fill and reaches only 3.7:1 as text; #62e6ff, the product's tag colour, was never a link. */
    --atp-link: #4da3ff;
    --atp-error: rgb(255, 74, 74);
    --atp-surface: rgba(255, 255, 255, 0.04);
    --atp-surface-hover: rgba(255, 255, 255, 0.08);
    /* 35% white over the card is ~3:1 against it, the contrast a control's own outline needs. */
    --atp-button-border: rgba(255, 255, 255, 0.35);
    --atp-font: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --atp-card-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

body.theme-atp360 {
    font-family: var(--atp-font);
    background-color: var(--atp-page);
    color: var(--atp-text-muted);
}

/* Page background: the mountain photograph and its dark overlay are replaced by the same flat navy and
   top-centre glow the ATP360 login screen uses. */

.theme-atp360 .page-wrapper {
    background-color: var(--atp-page);
}

.theme-atp360 .page-wrapper .page-wrapper-inner {
    background: var(--atp-page);
}

.theme-atp360 .page-wrapper .page-wrapper-inner.login {
    background-image: radial-gradient(circle at 50% 0%, rgba(39, 24, 108, 0.5) 0%, transparent 65%);
    background-color: var(--atp-page);
}

.theme-atp360 .page-wrapper .page-wrapper-inner .shade {
    background-color: transparent;
}

/* Cards */

.theme-atp360 .page-wrapper .page-wrapper-inner .page-wrapper-content .login-card {
    background-color: var(--atp-card);
    border: 1px solid var(--atp-border);
    border-radius: 16px;
    box-shadow: var(--atp-card-shadow);
}

.theme-atp360 .page-wrapper .page-wrapper-inner .page-wrapper-content .login-card h1,
.theme-atp360 .page-wrapper .page-wrapper-inner .page-wrapper-content .login-card h2 {
    color: var(--atp-text);
}

.theme-atp360 .page-wrapper .page-wrapper-inner .page-wrapper-content .login-card .description,
.theme-atp360 .page-wrapper .page-wrapper-inner .page-wrapper-content .login-card .lead,
.theme-atp360 .page-wrapper .page-wrapper-inner .page-wrapper-content .login-card p,
.theme-atp360 .page-wrapper .page-wrapper-inner .page-wrapper-content .login-card li {
    color: var(--atp-text-muted);
}

.theme-atp360 .page-wrapper .page-wrapper-inner .page-wrapper-content .register-card.register-service-type,
.theme-atp360 .page-wrapper .page-wrapper-inner .page-wrapper-content .register-card.register-company,
.theme-atp360 .page-wrapper .page-wrapper-inner .page-wrapper-content .register-card.register-hosting {
    background-color: var(--atp-card) !important;
    border: 1px solid var(--atp-border);
    box-shadow: var(--atp-card-shadow);
}

.theme-atp360 .service-type-header {
    color: var(--atp-text) !important;
}

.theme-atp360 .register-card h4 {
    color: var(--atp-text);
}

.theme-atp360 .text-muted {
    color: var(--atp-text-muted) !important;
}

.theme-atp360 a {
    color: var(--atp-link);
}

/* Buttons. The primary button in main.scss inverts to a light background on hover, which reads as a
   disabled state against a dark card, so both states are redefined rather than only the resting one. */

.theme-atp360 .custom-button.primary {
    background-color: var(--atp-blue);
    border: 1px solid var(--atp-blue);
    color: #ffffff;
    border-radius: 10px;
    font-weight: 600;
}

.theme-atp360 .custom-button.primary i,
.theme-atp360 .custom-button.primary span {
    color: #ffffff;
}

.theme-atp360 .custom-button.primary:not(:disabled):hover {
    background-color: var(--atp-blue-hover);
    border-color: var(--atp-blue-hover);
    color: #ffffff;
}

.theme-atp360 .custom-button.primary:not(:disabled):hover i,
.theme-atp360 .custom-button.primary:not(:disabled):hover span {
    color: #ffffff;
}

.theme-atp360 .custom-button.success {
    background-color: var(--atp-blue);
    color: #ffffff;
}

.theme-atp360 .custom-button.success:not(:disabled):hover {
    background-color: var(--atp-blue-hover);
    color: #ffffff;
}

.theme-atp360 .custom-button.success:not(:disabled):hover i,
.theme-atp360 .custom-button.success:not(:disabled):hover span {
    color: #ffffff;
}

/* The secondary action: Back on the company form, the guide and walkthrough beside Deploy, Decline on
   the EULA. --atp-border is a dark indigo one step off the card, so on its own it leaves the button
   almost invisible. The button is given the same faint fill .atp-btn-secondary uses in the product
   (ATP360.Frontend/src/index.css) and a border light enough to read against the card. */
.theme-atp360 .custom-button.white,
.theme-atp360 button.custom-button:not(.primary):not(.success):not(.simple),
.theme-atp360 a.custom-button:not(.primary):not(.success):not(.simple) {
    background-color: var(--atp-surface);
    border: 1px solid var(--atp-button-border);
    color: var(--atp-text);
    border-radius: 10px;
    font-weight: 600;
}

/* The label needs its own rule: main.css paints .custom-button.white's span with --color-dark1, which
   is black on this card ("Sign in using email" on the login page). That rule is only in the compiled
   main.css - main.scss lost the .white block, so recompiling it would drop these rules entirely. */
.theme-atp360 .custom-button.white i,
.theme-atp360 .custom-button.white span,
.theme-atp360 button.custom-button:not(.primary):not(.success):not(.simple) span,
.theme-atp360 a.custom-button:not(.primary):not(.success):not(.simple) span {
    color: var(--atp-text);
}

.theme-atp360 .custom-button.white:not(:disabled):hover,
.theme-atp360 button.custom-button:not(.primary):not(.success):not(.simple):not(:disabled):hover,
.theme-atp360 a.custom-button:not(.primary):not(.success):not(.simple):not(:disabled):hover {
    background-color: var(--atp-surface-hover);
    border-color: var(--atp-text-muted);
    color: var(--atp-text);
}

.theme-atp360 .custom-button.simple,
.theme-atp360 .custom-button.simple.primary {
    background-color: transparent;
    border: 0;
    color: var(--atp-link);
}

.theme-atp360 .custom-button:disabled {
    background: var(--atp-surface);
    border-color: var(--atp-border);
    color: var(--atp-text-muted);
}

.theme-atp360 .custom-button:disabled span {
    color: var(--atp-text-muted);
}

/* Form fields. The company form is Bootstrap; the login form uses main.scss's .input-def. */

.theme-atp360 .form-label,
.theme-atp360 label {
    color: var(--atp-text-muted);
}

.theme-atp360 .form-control,
.theme-atp360 .form-select,
.theme-atp360 .input-def {
    background-color: var(--atp-page);
    border: 1px solid var(--atp-border);
    color: var(--atp-text);
}

.theme-atp360 .form-control:focus,
.theme-atp360 .form-select:focus,
.theme-atp360 .input-def:hover,
.theme-atp360 .input-def:focus {
    background-color: var(--atp-page);
    border-color: var(--atp-blue);
    box-shadow: none;
    color: var(--atp-text);
}

.theme-atp360 .form-control::placeholder,
.theme-atp360 .input-def::placeholder {
    color: var(--atp-text-muted);
    opacity: 1;
}

.theme-atp360 .form-control:disabled,
.theme-atp360 .form-control[readonly],
.theme-atp360 .form-select:disabled,
.theme-atp360 .input-def:disabled {
    background-color: var(--atp-surface);
    border-color: var(--atp-border);
    color: var(--atp-text-muted);
    cursor: not-allowed;
}

/* Bootstrap draws the select arrow as a dark SVG data URI, invisible on a dark field. */
.theme-atp360 .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.theme-atp360 .form-select option {
    background-color: var(--atp-card);
    color: var(--atp-text);
}

.theme-atp360 .text-danger {
    color: var(--atp-error) !important;
}

.theme-atp360 .validation-summary ul {
    margin-bottom: 0;
}

/* Field help icon and its tooltip. Bootstrap's black tooltip barely separates from the navy card, so it
   takes the indigo border colour instead; the tooltip is appended to body, which carries the theme class. */

.theme-atp360 .field-help {
    color: var(--atp-link);
}

.theme-atp360 .field-help:hover,
.theme-atp360 .field-help:focus-visible {
    color: var(--atp-text);
}

.theme-atp360 .tooltip {
    --bs-tooltip-bg: var(--atp-border);
    --bs-tooltip-color: var(--atp-text);
    --bs-tooltip-opacity: 1;
    font-family: var(--atp-font);
}

/* Country dropdown */

.theme-atp360 .custom-country-btn {
    background-color: var(--atp-page);
    border: 1px solid var(--atp-border);
    color: var(--atp-text);
}

.theme-atp360 .custom-dropdown-list {
    background-color: var(--atp-card);
    border: 1px solid var(--atp-border);
    box-shadow: var(--atp-card-shadow);
}

.theme-atp360 .custom-dropdown-search {
    background-color: var(--atp-page);
    border-bottom: 1px solid var(--atp-border);
    color: var(--atp-text);
}

.theme-atp360 .custom-dropdown-search:focus {
    background-color: var(--atp-page);
}

.theme-atp360 .custom-dropdown-item {
    color: var(--atp-text);
}

.theme-atp360 .custom-dropdown-item:hover {
    background-color: var(--atp-surface-hover);
}

.theme-atp360 .custom-dropdown-item.placeholder-item,
.theme-atp360 .custom-dropdown-item.no-results {
    color: var(--atp-text-muted);
}

.theme-atp360 .custom-dropdown-item.no-results:hover {
    background-color: transparent;
}

/* Hosting choice: the comparison table and the two named options on Register/ServiceType. */

.theme-atp360 .hosting-lede,
.theme-atp360 .hosting-footnote,
.theme-atp360 .hosting-option-sub,
.theme-atp360 .hosting-table .hosting-where {
    color: var(--atp-text-muted);
}

.theme-atp360 .hosting-table {
    background: transparent;
    border: 1px solid var(--atp-border);
    color: var(--atp-text);
}

.theme-atp360 .hosting-table thead th {
    background: var(--atp-surface);
    border-bottom: 1px solid var(--atp-border);
    color: var(--atp-text);
}

.theme-atp360 .hosting-table tbody th {
    background: transparent;
    color: var(--atp-text);
}

.theme-atp360 .hosting-table tbody td {
    color: var(--atp-text-muted);
}

.theme-atp360 .hosting-table tbody tr + tr th,
.theme-atp360 .hosting-table tbody tr + tr td {
    border-top: 1px solid var(--atp-border);
}

.theme-atp360 .hosting-table tbody tr:nth-child(even) th,
.theme-atp360 .hosting-table tbody tr:nth-child(even) td {
    background: var(--atp-surface);
}

.theme-atp360 .hosting-option {
    background: var(--atp-page);
    border: 1.5px solid var(--atp-border);
    color: var(--atp-text);
}

.theme-atp360 .hosting-option input {
    accent-color: var(--atp-blue);
}

.theme-atp360 .hosting-option:has(input:checked) {
    border-color: var(--atp-blue);
    box-shadow: inset 0 0 0 1px var(--atp-blue);
    background: var(--atp-surface);
}

.theme-atp360 .hosting-option:has(input:focus-visible) {
    outline: 3px solid var(--atp-blue);
}

.theme-atp360 .hosting-option-title {
    color: var(--atp-text);
}

.theme-atp360 .hosting-badge {
    color: var(--atp-text);
    background: var(--atp-surface);
    border: 1px solid var(--atp-border);
}

@media (max-width: 820px) {
    .theme-atp360 .hosting-table tbody tr {
        border: 1px solid var(--atp-border);
    }

    .theme-atp360 .hosting-table tbody th,
    .theme-atp360 .hosting-table tbody tr:nth-child(even) th {
        background: var(--atp-surface);
    }

    .theme-atp360 .hosting-table tbody td,
    .theme-atp360 .hosting-table tbody tr:nth-child(even) td {
        background: transparent;
        border-top: 1px solid var(--atp-border);
    }

    .theme-atp360 .hosting-table tbody td::before {
        color: var(--atp-text);
    }
}

/* Embedded video and completion screen */

.theme-atp360 .media-container {
    box-shadow: var(--atp-card-shadow);
}

.theme-atp360 .completion-support {
    border-top-color: var(--atp-border);
}

/*
   EULA. The agreement itself is authored elsewhere and rendered with @Html.Raw, carrying its own colours
   and in places its own inline styles, which no rule here can reliably override. Rather than gamble on it
   being legible, the agreement keeps a light surface and the page frames it - the dark page, a dark header
   and a dark footer around a white document. Everything the identity app owns is themed.
*/

.theme-atp360 .card.card-default {
    background-color: var(--atp-card);
    border: 1px solid var(--atp-border);
    border-radius: 16px;
    box-shadow: var(--atp-card-shadow);
    overflow: hidden;
}

.theme-atp360 .card.card-default .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--atp-border);
    color: var(--atp-text);
    font-size: 18px;
    padding: 18px 20px;
}

.theme-atp360 .card.card-default .card-body {
    background-color: #ffffff;
    color: #1c1f26;
    max-height: 60vh;
    overflow-y: auto;
}

.theme-atp360 .card.card-default .card-body a {
    color: #0b5ed7;
}

.theme-atp360 .card.card-default .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--atp-border);
    padding: 16px 20px;
}

/* Alerts */

.theme-atp360 .alert.alert-warning {
    background-color: rgba(236, 177, 0, 0.12);
    border: 1px solid rgba(236, 177, 0, 0.4);
    color: var(--atp-text);
}

.theme-atp360 .alert.alert-warning p,
.theme-atp360 .alert.alert-warning li {
    color: var(--atp-text);
}

/*
   The split sign-up and sign-in screens (_SplitLayout.cshtml): the form on the left, a decorative ATP360
   dashboard on the right. These screens do not use the .page-wrapper chain the rules above override, so
   nothing here needs that selector depth.

   Everything is a class because SecurityHeadersAttribute sends style-src 'self' with no 'unsafe-inline',
   which blocks style= attributes as well as <style> blocks. That is why the two charts carry height
   classes instead of a height per bar; the design's percentages are rounded to 5% steps so one set of
   classes serves both.
*/

.theme-atp360 .atp-split {
    /* Chart colours. The rest of the screen reuses the tokens at the top of this file. */
    --atp-chart-magenta: #ff007e;
    --atp-chart-purple: #6816ff;
    --atp-chart-cyan: #10a8dd;
    --atp-chart-green: #4ba06d;
    --atp-chart-amber: #ecb100;
    --atp-chart-grey: #4a5568;
    --atp-split-glow: #1b1a4a;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--atp-page);
    color: var(--atp-text);
}

.theme-atp360 .atp-split-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background-image: radial-gradient(900px 520px at 30% 40%, var(--atp-split-glow), transparent 70%);
}

.theme-atp360 .atp-split-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 408px;
}

.theme-atp360 .atp-split-logo img {
    height: 34px;
    max-width: 100%;
}

.theme-atp360 .atp-split h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--atp-text);
}

/* The negative top margins pull two blocks closer than the column's 40px gap, the way the design spaces
   them. A flex gap is not collapsed by a margin, so the two add up. */
.theme-atp360 .atp-split-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: -20px 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.5;
    color: #e2e8f0;
}

.theme-atp360 .atp-split-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-atp360 .atp-split-benefits .atp-split-tick {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--atp-chart-green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-atp360 .atp-split-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: -12px;
}

/* The Microsoft button is a dark bordered button on these two screens, not the solid blue primary the
   rest of the identity pages use, so the override is scoped to the split layout. */
.theme-atp360 .atp-split .atp-split-provider.custom-button.primary,
.theme-atp360 .atp-split .atp-split-provider.custom-button.primary:not(:disabled):hover {
    background-color: var(--atp-surface);
    border: 1px solid var(--atp-button-border);
    color: var(--atp-text);
}

.theme-atp360 .atp-split .atp-split-provider.custom-button.primary:not(:disabled):hover {
    background-color: var(--atp-surface-hover);
    border-color: var(--atp-text-muted);
}

.theme-atp360 .atp-ms-mark {
    display: grid;
    grid-template-columns: 9px 9px;
    gap: 2px;
}

.theme-atp360 .atp-ms-mark span {
    width: 9px;
    height: 9px;
}

.theme-atp360 .atp-ms-mark span:nth-child(1) {
    background: #f25022;
}

.theme-atp360 .atp-ms-mark span:nth-child(2) {
    background: #7fba00;
}

.theme-atp360 .atp-ms-mark span:nth-child(3) {
    background: #00a4ef;
}

.theme-atp360 .atp-ms-mark span:nth-child(4) {
    background: #ffb900;
}

.theme-atp360 .atp-split-footnotes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--atp-text-muted);
}

.theme-atp360 .atp-split-footnotes p {
    color: var(--atp-text-muted);
}

.theme-atp360 .atp-split-footnotes a {
    font-weight: 600;
}

/* Hero */

.theme-atp360 .atp-hero {
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--atp-border);
    background-color: var(--atp-page);
}

.theme-atp360 .atp-hero-board {
    position: absolute;
    left: -10%;
    top: -20%;
    width: 150%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    transform: perspective(1600px) rotateX(38deg) rotateZ(-24deg);
    transform-origin: center;
    filter: blur(0.4px);
    opacity: 0.9;
}

.theme-atp360 .atp-hero-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, var(--atp-page) 0%, rgba(11, 15, 26, 0) 22%),
        radial-gradient(1200px 420px at 50% -180px, var(--atp-split-glow), transparent 70%);
}

.theme-atp360 .atp-kpi {
    padding: 20px 24px;
    background-image: linear-gradient(180deg, #101b2d, #141b38);
    border: 1px solid var(--atp-border);
    border-left: 4px solid var(--atp-blue);
    border-radius: 10px;
}

.theme-atp360 .atp-kpi.tone-warn {
    border-left-color: var(--atp-chart-amber);
}

.theme-atp360 .atp-kpi-value {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
}

.theme-atp360 .atp-kpi.tone-info .atp-kpi-value {
    color: var(--atp-blue);
}

.theme-atp360 .atp-kpi.tone-warn .atp-kpi-value {
    color: var(--atp-chart-amber);
}

.theme-atp360 .atp-kpi.tone-cost .atp-kpi-value {
    color: var(--atp-chart-cyan);
}

.theme-atp360 .atp-kpi.tone-pass .atp-kpi-value {
    color: var(--atp-chart-green);
}

.theme-atp360 .atp-kpi-label {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--atp-text-muted);
}

.theme-atp360 .atp-hero-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    background-color: var(--atp-card);
    border: 1px solid var(--atp-border);
    border-radius: 12px;
}

.theme-atp360 .atp-hero-card-wide {
    grid-column: span 2;
}

.theme-atp360 .atp-hero-card-full {
    grid-column: span 3;
    gap: 16px;
}

.theme-atp360 .atp-hero-card-donut {
    align-items: center;
}

.theme-atp360 .atp-hero-card-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--atp-text);
}

.theme-atp360 .atp-hero-card-donut .atp-hero-card-title {
    align-self: flex-start;
}

.theme-atp360 .atp-bars {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 220px;
}

.theme-atp360 .atp-bar-stack {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    height: 100%;
}

.theme-atp360 .atp-bar-fail {
    background-color: var(--atp-chart-magenta);
    border-radius: 3px 3px 0 0;
}

.theme-atp360 .atp-bar-pass {
    background-color: var(--atp-blue);
}

.theme-atp360 .atp-donut {
    display: grid;
    place-items: center;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: conic-gradient(
        var(--atp-blue) 0 32%,
        var(--atp-chart-purple) 0 52%,
        var(--atp-chart-magenta) 0 70%,
        var(--atp-chart-cyan) 0 84%,
        var(--atp-chart-amber) 0 94%,
        var(--atp-chart-grey) 0);
}

.theme-atp360 .atp-donut-hole {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: var(--atp-card);
}

.theme-atp360 .atp-os-bars {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    height: 180px;
}

.theme-atp360 .atp-os-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
}

.theme-atp360 .atp-os-bar.series-blue {
    background-color: var(--atp-blue);
}

.theme-atp360 .atp-os-bar.series-purple {
    background-color: var(--atp-chart-purple);
}

.theme-atp360 .atp-os-bar.series-magenta {
    background-color: var(--atp-chart-magenta);
}

.theme-atp360 .atp-os-bar.series-cyan {
    background-color: var(--atp-chart-cyan);
}

.theme-atp360 .atp-os-bar.series-green {
    background-color: var(--atp-chart-green);
}

.theme-atp360 .atp-h-10 { height: 10%; }
.theme-atp360 .atp-h-15 { height: 15%; }
.theme-atp360 .atp-h-20 { height: 20%; }
.theme-atp360 .atp-h-25 { height: 25%; }
.theme-atp360 .atp-h-30 { height: 30%; }
.theme-atp360 .atp-h-40 { height: 40%; }
.theme-atp360 .atp-h-50 { height: 50%; }
.theme-atp360 .atp-h-55 { height: 55%; }
.theme-atp360 .atp-h-60 { height: 60%; }
.theme-atp360 .atp-h-65 { height: 65%; }
.theme-atp360 .atp-h-70 { height: 70%; }
.theme-atp360 .atp-h-75 { height: 75%; }
.theme-atp360 .atp-h-90 { height: 90%; }

@media (max-width: 900px) {
    .theme-atp360 .atp-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .theme-atp360 .atp-hero {
        display: none;
    }

    .theme-atp360 .atp-split-pane {
        padding: 40px 24px;
    }
}

/* Registration Complete for a self-hosted signup. Two numbered steps: deploy in Azure, then link the
   finished deployment. The "No" panel opens on a sibling rule off the radio, so the branch needs no script. */

.theme-atp360 .deploy-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.theme-atp360 .deploy-intro p {
    margin: 0;
    max-width: 980px;
    text-align: center;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 300;
    color: var(--atp-text-muted);
}

.theme-atp360 .deploy-step {
    padding: 28px 32px;
    margin-bottom: 24px;
    border: 1px solid var(--atp-button-border);
    border-radius: 12px;
    background-color: var(--atp-surface);
}

.theme-atp360 .deploy-step-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* 36px circle, so the 50px indent below lines the body up with the heading text beside it. */
.theme-atp360 .deploy-step-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background-color: var(--atp-blue);
    border: 2px solid var(--atp-blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
}

.theme-atp360 .deploy-step-number.outlined {
    background-color: var(--atp-card);
    color: var(--atp-text);
}

.theme-atp360 .deploy-step-head h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--atp-text);
}

.theme-atp360 .deploy-step-pill {
    padding: 4px 12px;
    border: 1px solid rgba(236, 177, 0, 0.5);
    border-radius: 999px;
    background-color: rgba(236, 177, 0, 0.12);
    font-size: 14px;
    font-weight: 600;
    color: #ecb100;
}

.theme-atp360 .deploy-step-body {
    margin-left: 50px;
}

.theme-atp360 .deploy-step-body > p {
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--atp-text-muted);
}

.theme-atp360 .deploy-step-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.theme-atp360 .tenant-question {
    margin: 16px 0 12px;
    font-size: 18px;
    color: var(--atp-text);
}

.theme-atp360 .tenant-choices {
    display: flex;
    align-items: center;
    gap: 36px;
}

.theme-atp360 .tenant-choices label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    color: var(--atp-text);
    cursor: pointer;
}

.theme-atp360 .tenant-choices input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--atp-blue);
}

.theme-atp360 .tenant-branch {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--atp-button-border);
}

.theme-atp360 .tenant-details {
    display: none;
}

.theme-atp360 .deploy-step:has(#same-tenant-no:checked) .tenant-details {
    display: block;
}

.theme-atp360 .deploy-step:has(#same-tenant-no:checked) .same-tenant-details {
    display: none;
}

.theme-atp360 .same-tenant-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.theme-atp360 .same-tenant-details .tenant-hint {
    font-size: 16px;
    color: var(--atp-text-muted);
}

.theme-atp360 .tenant-details .form-label {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    color: var(--atp-text);
}

/* Label above, then the tenant id and its button on one row; the input takes whatever is left. */
.theme-atp360 .tenant-claim-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

.theme-atp360 .tenant-claim-row .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.theme-atp360 .tenant-claim-row .deploy-button {
    flex-shrink: 0;
    white-space: nowrap;
}

.theme-atp360 .deployment-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    word-break: break-all;
}

.theme-atp360 .deployment-choice label {
    margin: 0;
    color: var(--atp-text);
}

.theme-atp360 .deploy-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--atp-text);
}

.theme-atp360 .deploy-status svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Heading over description. Stacking on the wrapper rather than on the elements keeps a strong inside
   the description inline, which naming a button in it needs. */
.theme-atp360 .deploy-status-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.theme-atp360 .deploy-status-text > strong {
    font-size: 17px;
    font-weight: 600;
    color: var(--atp-text);
}

.theme-atp360 .deploy-status-text > span {
    color: var(--atp-text-muted);
}

.theme-atp360 .deploy-status-text > span strong {
    font-weight: 600;
    color: var(--atp-text);
}

.theme-atp360 .deploy-status.info {
    background-color: rgba(0, 111, 248, 0.12);
    border: 1px solid rgba(0, 111, 248, 0.5);
}

.theme-atp360 .deploy-status.warn {
    background-color: rgba(236, 177, 0, 0.12);
    border: 1px solid #ecb100;
}

.theme-atp360 .deploy-status.ok {
    background-color: rgba(75, 160, 109, 0.14);
    border: 1px solid #4ba06d;
}

.theme-atp360 .deploy-status.error {
    background-color: rgba(255, 74, 74, 0.12);
    border: 1px solid var(--atp-error);
}

.theme-atp360 .tenant-fallback {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--atp-text-muted);
}