/*
 * @medicus/ui — CANONICAL hosted-auth stylesheet (source of truth).
 *
 * This file is the single source of truth for the look of any Medicus
 * server-rendered (non-React) auth surface — e.g. the IAM hosted pages
 * (Login, SignUp, SignUpSuccess, ForgotPassword, ResetPassword,
 * TwoFactorChallenge, AccessDenied, Consent). It mirrors the React
 * components in this package 1:1 (input shape, focus ring, button radii,
 * card chrome, logo wordmark, type scale, spacing) so a Razor/Bootstrap
 * page can reach pixel parity with the healthspan app.
 *
 * Consumers MUST vendor this file verbatim (a CI sync step) rather than
 * fork it — a copy that drifts defeats the purpose. Import:
 *   `@medicus/ui/hosted`  (pairs with `@medicus/ui/styles` tokens).
 *
 * Load order in the host page:
 *   1. medicus-tokens.css  (CSS custom properties + font @import)
 *   2. medicus-hosted.css  (this file)
 * Bootstrap, if present, must load BEFORE these so this file wins.
 */

/* ── Page chrome ─────────────────────────────────────────── */

body.medicus-auth-page {
    background: linear-gradient(135deg, #fff 0%, var(--medicus-light) 50%, #fff 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    font-family: var(--medicus-font);
    /* Match healthspan's body rendering (Tailwind `antialiased`) so Plus
       Jakarta Sans renders at the same lighter weight on macOS/WebKit. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--medicus-dark);
    margin: 0;
}

/* ── Card container ──────────────────────────────────────── */

.medicus-auth-card {
    background: #fff;
    border: 1px solid var(--medicus-border);
    border-radius: var(--medicus-radius-lg);
    box-shadow: var(--medicus-shadow-lg);
}

/* Card padding — healthspan's auth card uses p-8 (2rem / 32px). Pin it so
   the host page doesn't rely on Bootstrap's .card-body padding or a .p-5
   utility (3rem), which read oversized vs healthspan. */
.medicus-auth-card .card-body {
    padding: 2rem;
}

/* ── Logo wordmark — "[mark] medicus.ai" ─────────────────── */
/* Matches MedicusLogo from medicus-ui: a square mark followed by a wordmark
   where the ".ai" suffix is muted. Per-client branding can override the
   wordmark text via {Branding}Logo wrapper (see ApplyClientBrandingAsync). */

.medicus-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.medicus-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.medicus-logo-text {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--medicus-dark);
    line-height: 1.2;
}

.medicus-logo-text .suffix {
    color: var(--medicus-gray);
    font-weight: 600;
}

.medicus-logo-text .subtitle {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--medicus-gray);
}

/* Centered variant for the auth pages. Mirrors healthspan's
   MedicusHealthspanLogo: a compact 40px mark beside the wordmark
   (horizontal, gap-3), centered on the page — NOT a large stacked mark. */
.medicus-logo--center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

.medicus-logo--center img {
    width: 40px;
    height: 40px;
}

/* ── Form controls — match medicus-ui MedicusTextInput ───── */
/* Bootstrap's .form-control has its own radius/padding/focus; override here
   to match the canonical React input style. Scoping by .medicus-auth-card so
   we don't leak into the admin UI. */

.medicus-auth-card .form-control,
.medicus-auth-card .form-select {
    border: 1px solid var(--medicus-border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    color: var(--medicus-navy);
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.medicus-auth-card .form-control::placeholder {
    color: var(--medicus-text-muted);
}

.medicus-auth-card .form-control:focus,
.medicus-auth-card .form-select:focus {
    border-color: rgba(6, 232, 219, 0.4);
    box-shadow: 0 0 0 3px rgba(6, 232, 219, 0.1);
    outline: none;
}

.medicus-auth-card .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--medicus-text-secondary);
    margin-bottom: 0.4rem;
}

/* ── Buttons — primary uses medicus-gradient ─────────────── */

.medicus-auth-card .btn-medicus {
    background: var(--medicus-gradient);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.medicus-auth-card .btn-medicus:hover,
.medicus-auth-card .btn-medicus:focus,
.medicus-auth-card .btn-medicus:active {
    background: var(--medicus-gradient-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--medicus-shadow-md);
}

.medicus-auth-card .btn-medicus:disabled {
    opacity: 0.55;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.medicus-auth-card .btn-outline-secondary {
    border: 1px solid var(--medicus-border);
    color: var(--medicus-gray);
    border-radius: 10px;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    background: #fff;
}

.medicus-auth-card .btn-outline-secondary:hover {
    background: var(--medicus-light);
    color: var(--medicus-dark);
    border-color: var(--medicus-border);
}

/* Secondary CTA (e.g. "Sign up" on Login). Bootstrap's .btn-outline-primary
   is otherwise unthemed, so its text fell through to the link colour and
   read green. Match the medicus-ui outline button: navy text + cyan border,
   gradient fill on hover. */
.medicus-auth-card .btn-outline-primary {
    color: var(--medicus-navy);
    border: 1px solid var(--medicus-cyan);
    border-radius: 10px;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    background: #fff;
}

.medicus-auth-card .btn-outline-primary:hover,
.medicus-auth-card .btn-outline-primary:focus {
    background: var(--medicus-gradient);
    color: #fff;
    border-color: transparent;
}

/* ── Checkboxes (GDPR consent boxes on SignUp) ───────────── */

.medicus-auth-card .form-check-input {
    border: 1px solid var(--medicus-border);
    border-radius: 4px;
}

.medicus-auth-card .form-check-input:checked {
    background-color: var(--medicus-cyan);
    border-color: var(--medicus-cyan);
}

.medicus-auth-card .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(6, 232, 219, 0.1);
    border-color: rgba(6, 232, 219, 0.4);
}

/* ── Links ───────────────────────────────────────────────── */

/* Unify links to the medicus-ui accent (cyan) — healthspan's dominant link
   colour. Previously links were teal-dark (read green) while Bootstrap
   `.text-primary` links rendered blue: two link colours, neither on-brand.
   NOTE: cyan on white is low-contrast for body text; acceptable for the
   short link labels here, but flag if WCAG AA is a hard requirement. */
.medicus-auth-card a {
    color: var(--medicus-cyan);
    text-decoration: none;
}

.medicus-auth-card a:hover {
    text-decoration: underline;
}

.medicus-auth-card .text-primary {
    color: var(--medicus-cyan) !important;
}

/* Password-requirement "met" ticks etc. — brand success, not Bootstrap green. */
.medicus-auth-card .text-success {
    color: var(--medicus-success) !important;
}

/* ── Alerts — theme bootstrap variants to the medicus palette ── */

.medicus-auth-card .alert {
    border-radius: 12px;
    border-width: 1px;
    font-size: 0.9rem;
    padding: 0.875rem 1rem;
}

.medicus-auth-card .alert-success {
    background: var(--medicus-teal-light);
    border-color: var(--medicus-teal);
    color: var(--medicus-teal-dark);
}

.medicus-auth-card .alert-info {
    background: var(--medicus-teal-lighter);
    border-color: var(--medicus-teal);
    color: var(--medicus-teal-dark);
}

.medicus-auth-card .alert-warning {
    background: #fff8e6;
    border-color: var(--medicus-warning);
    color: #8a6d1f;
}

.medicus-auth-card .alert-danger {
    background: #fff1ee;
    border-color: var(--medicus-coral);
    color: #b23b1e;
}

/* ── Typography ──────────────────────────────────────────── */

.medicus-auth-card h1,
.medicus-auth-card h2,
.medicus-auth-card h3,
.medicus-auth-card h4 {
    color: var(--medicus-dark);
    /* Match healthspan exactly: text-lg / font-semibold / tracking-tight.
       The body font-smoothing keeps 600 from reading heavy on macOS. */
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Page titles use <h2 class="h4">; pin to 18px (healthspan text-lg) so they
   don't inherit Bootstrap's larger 1.5rem .h4. */
.medicus-auth-card .h4 {
    font-size: 1.125rem;
}

/* ── Iconography — match healthspan's clean, icon-light surfaces ──────── */
/* healthspan labels, buttons, links, and alerts carry no FontAwesome glyphs.
   Hide every decorative leading icon (any `i.fas` with a margin class) plus
   label icons. Functional icons are NOT FontAwesome: status discs and alert
   markers are inline SVGs, and the password checklist uses `.pw-bullet`
   (below) — so none of them match these selectors. */
.medicus-auth-card .form-label i.fas,
.medicus-auth-card .form-check-label i.fas,
.medicus-auth-page i.fas.me-1,
.medicus-auth-page i.fas.me-2 {
    display: none;
}

/* Inline SVG icons inherit size from font-size (1em) and colour from
   currentColor, so they slot into the old FontAwesome spots unchanged. */
.medicus-auth-card .medicus-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* ── Password-requirement checklist bullet (replaces FA fa-circle/
   fa-check-circle, toggled by the page's validation JS via `.text-success`
   on the <i>). Empty ring when unmet; filled check when met. ──────────── */
.medicus-auth-card .pw-bullet {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    vertical-align: -0.15em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.62rem;
}

.medicus-auth-card .pw-bullet.text-success {
    border-color: var(--medicus-success);
    background-color: var(--medicus-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
}

.medicus-auth-card .text-muted {
    color: var(--medicus-text-secondary) !important;
}

/* ── Footer note ─────────────────────────────────────────── */

.medicus-auth-footer {
    text-align: center;
    color: var(--medicus-text-muted);
    font-size: 0.75rem;
    margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   Standalone layer — run the hosted pages WITHOUT Bootstrap.
   Replicates only the layout / component base / utilities the auth views
   actually use (per the audited class inventory). Values mirror Bootstrap's
   defaults so existing Razor markup renders unchanged. Load this file and
   medicus-tokens.css only — no bootstrap.min.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* Box model + base reset (Bootstrap-equivalent, scoped to the auth page) */
.medicus-auth-page *,
.medicus-auth-page *::before,
.medicus-auth-page *::after { box-sizing: border-box; }

/* Layout — centered single-column shell (replaces container/row/col grid) */
.medicus-auth-page .container { width: 100%; max-width: 480px; margin: 0 auto; padding: 0 1rem; }
.medicus-auth-page .row { display: flex; justify-content: center; }
.medicus-auth-page [class*="col-"] { width: 100%; }

/* Card base (Bootstrap .card) */
.medicus-auth-card { display: flex; flex-direction: column; }

/* Form controls — base box (medicus look applied in the section above) */
.medicus-auth-card .form-control,
.medicus-auth-card .form-select { display: block; width: 100%; line-height: 1.5; }
.medicus-auth-card .form-label { display: inline-block; }
.medicus-auth-card .form-text { display: block; }

/* Checkboxes (Bootstrap .form-check) */
.medicus-auth-card .form-check { display: block; min-height: 1.5rem; padding-left: 1.6em; }
.medicus-auth-card .form-check-input {
    width: 1em; height: 1em; margin-top: 0.25em; margin-left: -1.6em;
    vertical-align: top; appearance: none; -webkit-appearance: none;
    background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: contain;
}
.medicus-auth-card .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.medicus-auth-card .form-check-label { display: inline; }

/* Buttons base (Bootstrap .btn). Only layout/interaction here — border,
   padding, background, font are owned by the variants (.btn-medicus /
   .btn-outline-*) defined above, so this base must NOT set them (it loads
   later in the file and would override the variants at equal specificity). */
.medicus-auth-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
}
.medicus-auth-page .d-grid > .btn { width: 100%; }

/* Alerts base box (variants themed in the section above) */
.medicus-auth-card .alert { position: relative; display: block; }

/* Text colour utilities not already themed above */
.medicus-auth-card .text-dark { color: var(--medicus-dark) !important; }
.medicus-auth-card .text-danger { color: #d63031 !important; }

/* Spacing utilities */
.medicus-auth-page .mb-0 { margin-bottom: 0 !important; }
.medicus-auth-page .mb-2 { margin-bottom: 0.5rem !important; }
.medicus-auth-page .mb-3 { margin-bottom: 1rem !important; }
.medicus-auth-page .mb-4 { margin-bottom: 1.5rem !important; }
.medicus-auth-page .mt-1 { margin-top: 0.25rem !important; }
.medicus-auth-page .mt-2 { margin-top: 0.5rem !important; }
.medicus-auth-page .mt-3 { margin-top: 1rem !important; }
.medicus-auth-page .mt-4 { margin-top: 1.5rem !important; }
.medicus-auth-page .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.medicus-auth-page .me-1 { margin-right: 0.25rem !important; }
.medicus-auth-page .me-2 { margin-right: 0.5rem !important; }
.medicus-auth-page .mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Display / flex / text-align utilities */
.medicus-auth-page .d-grid { display: grid !important; }
.medicus-auth-page .d-flex { display: flex !important; }
.medicus-auth-page .d-block { display: block !important; }
.medicus-auth-page .gap-2 { gap: 0.5rem !important; }
.medicus-auth-page .justify-content-center { justify-content: center !important; }
.medicus-auth-page .align-items-start { align-items: flex-start !important; }
.medicus-auth-page .w-100 { width: 100% !important; }
.medicus-auth-page .text-center { text-align: center !important; }
.medicus-auth-page .text-start { text-align: left !important; }
.medicus-auth-page .small { font-size: 0.875em; }