/* Plain, hand-written stylesheet for the Identity login/account pages.
   No build step: edit this file directly and refresh. */

/* Theme: light values on :root; the dark set appears twice with identical values - under
   [data-theme="dark"] (set before first paint by the inline script in Views/Shared/_Layout.cshtml
   from the ic-theme cookie, else prefers-color-scheme) and under the prefers-color-scheme media
   query as the no-JS fallback. Every custom property needs a dark value (guarded by
   Web.Tests IdentityLoginThemeTests). */
:root {
    color-scheme: light;
    --bg: #f5f7f8;
    --surface: #ffffff;
    --panel: #f2f2f2;
    --border: #e3ded6;
    --border-hover: #cfc7ba;
    --ink: #3e322a;
    --muted: #6b7280;
    --teal: #006886;
    --teal-dark: #004f66;
    --accent: #6dbab0;
    --accent-dark: #5aa89d;
    --on-accent: #fff;
    --btn-default-bg: #eef0f0;
    --btn-default-hover-bg: #e2e5e5;
    --divider: rgba(0, 104, 134, 0.15);
    --focus-ring: rgba(0, 104, 134, 0.15);
    --danger: #d9534f;
    --success: #5cb85c;
    --info: #5bc0de;
    --alert-danger-bg: #f2dede;
    --alert-danger-border: #ebccd1;
    --alert-danger-text: #a94442;
    --logo-backing: transparent;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1e272e;
    --surface: #2d3436;
    --panel: #353b3e;
    --border: #4a5568;
    --border-hover: #8894aa;
    --ink: #ecf0f1;
    --muted: #b2bec3;
    --teal: #8cd4ca;
    --teal-dark: #b5e6df;
    --accent: #8cd4ca;
    --accent-dark: #6dbab0;
    --on-accent: #1e272e;
    --btn-default-bg: #636e72;
    --btn-default-hover-bg: #74828a;
    --divider: rgba(140, 212, 202, 0.2);
    --focus-ring: rgba(140, 212, 202, 0.25);
    --danger: #ff8a89;
    --success: #55efc4;
    --info: #74b9ff;
    --alert-danger-bg: #4a1c1c;
    --alert-danger-border: #7a2e2e;
    --alert-danger-text: #ff7675;
    --logo-backing: #f5f7f8;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #1e272e;
        --surface: #2d3436;
        --panel: #353b3e;
        --border: #4a5568;
        --border-hover: #8894aa;
        --ink: #ecf0f1;
        --muted: #b2bec3;
        --teal: #8cd4ca;
        --teal-dark: #b5e6df;
        --accent: #8cd4ca;
        --accent-dark: #6dbab0;
        --on-accent: #1e272e;
        --btn-default-bg: #636e72;
        --btn-default-hover-bg: #74828a;
        --divider: rgba(140, 212, 202, 0.2);
        --focus-ring: rgba(140, 212, 202, 0.25);
        --danger: #ff8a89;
        --success: #55efc4;
        --info: #74b9ff;
        --alert-danger-bg: #4a1c1c;
        --alert-danger-border: #7a2e2e;
        --alert-danger-text: #ff7675;
        --logo-backing: #f5f7f8;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    margin-top: 135px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
    background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin: 0 0 0.5rem;
}

a {
    color: var(--teal);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover, a:focus {
    color: var(--teal-dark);
    text-decoration: underline;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
}

input[type="checkbox"] {
    margin: 8px 5px 0 0;
    transform: scale(1.3);
    accent-color: var(--teal);
}

/* Layout containers */

.container-fluid {
    width: 95%;
    margin-right: auto;
    margin-left: auto;
}

.container {
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 992px) {
    .container { max-width: 940px; }
}

.footer {
    padding: 15px 0;
    color: var(--muted);
}

/* Grid: only the row/col/offset combinations the views actually use */

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.row::after {
    content: "";
    display: table;
    clear: both;
}

.col-12, .col-xs-12,
.col-sm-12, .col-sm-6,
.col-md-2, .col-md-4, .col-md-6, .col-md-8, .col-md-10,
.col-lg-2, .col-lg-6, .col-lg-10 {
    position: relative;
    float: left;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .col-sm-6 { width: 50%; }
}

@media (min-width: 768px) {
    .col-md-2 { width: 16.6667%; }
    .col-md-4 { width: 33.3333%; }
    .col-md-6 { width: 50%; }
    .col-md-8 { width: 66.6667%; }
    .col-md-10 { width: 83.3333%; }
    .offset-md-2 { margin-left: 16.6667%; }
    .offset-md-6 { margin-left: 50%; }
}

@media (min-width: 992px) {
    .col-lg-2 { width: 16.6667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-10 { width: 83.3333%; }
    .offset-lg-2 { margin-left: 16.6667%; }
    .offset-lg-3 { margin-left: 25%; }
}

/* Top navbar */

.navbar, nav.navbar-light {
    background-color: var(--surface);
    min-height: 0;
    padding: 0.5rem 0;
    box-shadow: 0 1px 0 0 var(--border);
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar-brand {
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.25rem;
}

.img-container {
    min-height: 114px;
    display: flex;
    align-items: flex-end;
}

.img-logo {
    width: 200px;
    /* Tenant logos are usually dark-on-transparent: a light backing in dark mode keeps them
       visible (transparent, i.e. unchanged, in light mode). */
    background-color: var(--logo-backing);
    border-radius: 6px;
}

/* Card */

.card {
    position: relative;
    margin: 15px;
    padding: 0 15px 25px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-height: 9em;
    box-shadow: 0 1px 2px rgba(20, 30, 30, 0.04), 0 16px 32px -12px rgba(20, 40, 45, 0.15);
}

.card-block {
    padding: 1.5rem;
}

/* Divider line (used under the logo on the login card) */

.line {
    line-height: 2px;
    width: 100%;
    background-color: var(--divider);
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Forms */

.form-group {
    margin-bottom: 0.5rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 1rem;
    line-height: 1.25;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--ink);
    background-color: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--focus-ring);
    outline: none;
}

.form-control:hover {
    border-color: var(--border-hover);
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.1rem;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    background-color: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.btn-primary,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    min-width: 110px;
    padding: 0.55rem 1.5rem;
    margin: 3px;
    outline: none;
}

.btn-primary {
    box-shadow: 0 1px 2px rgba(20, 60, 55, 0.15);
}

.btn-primary:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    box-shadow: 0 6px 14px rgba(20, 60, 55, 0.2);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(20, 60, 55, 0.15);
}

.btn-default,
.btn-default:hover, .btn-default:focus, .btn-default:active {
    background-color: var(--btn-default-bg);
    border-color: var(--btn-default-bg);
    color: var(--ink);
    min-width: 110px;
    padding: 0.55rem 1.5rem;
    margin: 3px;
    outline: none;
}

.btn-default:hover {
    background-color: var(--btn-default-hover-bg);
    border-color: var(--btn-default-hover-bg);
}

.btn--primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(20, 60, 55, 0.15);
}

.btn--primary:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    box-shadow: 0 6px 14px rgba(20, 60, 55, 0.2);
    transform: translateY(-1px);
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-weight: 400;
    color: var(--teal);
}

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

/* Text / alert colors */

.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-info { color: var(--info); }

.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}

/* Sign-in problem pages (Views/Shared/ExternalError.cshtml, Error.cshtml, _SignInProblemActions.cshtml) */

.signin-problem p {
    margin: 0 0 0.75rem;
}

.signin-problem__hint,
.signin-problem__code {
    color: var(--muted);
}

.signin-problem__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin: 1.25rem 0 0.5rem;
}

.signin-problem__actions .btn-primary {
    margin: 0;
}

.signin-problem__reference {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--muted);
}

.signin-problem__ref-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.signin-problem__reference code {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.8rem;
    color: var(--ink);
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.45rem;
    user-select: all;
    word-break: break-all;
}

.signin-problem__copy {
    font: inherit;
    font-size: 0.8rem;
    color: var(--teal);
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}

.signin-problem__copy:hover {
    border-color: var(--teal);
}

/* Panel behind the login form (was an inline #f2f2f2 in Views/Account/Login.cshtml). */
.login-panel {
    background-color: var(--panel);
    margin-left: 15px;
}