/* ═══════════════════════════════════════════════════════════════
   TWR.Shared.Auth — Unified Login Theme
   Based on MyMedJourney Mobile PWA (gold standard)
   Palette: Calm clinical teal + warm off-white
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables: Login Color Palette ────────────────────────── */
:root {
    /* Bootstrap overrides */
    --bs-primary:          #146c94;
    --bs-primary-rgb:      20, 108, 148;
    --bs-success:          #1a8f5c;
    --bs-success-rgb:      26, 143, 92;
    --bs-warning:          #d97706;
    --bs-warning-rgb:      217, 119, 6;
    --bs-danger:           #d63030;
    --bs-danger-rgb:       214, 48, 48;
    --bs-info:             #0ea5e9;
    --bs-info-rgb:         14, 165, 233;

    --bs-body-bg:          #f0f5f7;
    --bs-body-font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --bs-body-font-size:   0.9375rem;
    --bs-border-radius:    0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;

    /* Login page: gradient background */
    --twr-login-bg-start:           #06232f;
    --twr-login-bg-end:             #0e6685;

    /* Login page: icon styling */
    --twr-login-icon-shadow-rgb:    20, 108, 148;

    /* Login page: title and accent color */
    --twr-login-title-color:        #0c3f52;
    --twr-login-accent-color:       #146c94;

    /* Login page: tagline and divider */
    --twr-login-tagline-color:      #5a7f8c;
    --twr-login-divider-color:      #dde8ea;

    /* Login page: card (white container) */
    --twr-login-card-bg:            #ffffff;
    --twr-login-card-shadow:        rgba(0,0,0,0.35);
}

/* ── Global page feel ─────────────────────────────────────────── */
body {
    background-color: var(--bs-body-bg);
    color: #17323d;
    -webkit-font-smoothing: antialiased;
}

/* ── Cards ────────────────────────────────────────────────────── */
.card {
    border: none !important;
    border-radius: var(--bs-border-radius-lg) !important;
    box-shadow: 0 2px 8px rgba(15, 60, 80, 0.08);
}

.card-header {
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    font-weight: 600;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
    border-radius: 6px;
    font-weight: 500;
}

.btn-primary {
    background: linear-gradient(135deg, #146c94, #1a86b3) !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(20,108,148,0.28);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0f5474, #146c94) !important;
    box-shadow: 0 3px 10px rgba(20,108,148,0.38);
}

.btn-outline-primary {
    color: #146c94;
    border-color: #146c94;
}

.btn-outline-primary:hover {
    background-color: #146c94;
}

/* ── Form controls ────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #146c94;
    box-shadow: 0 0 0 0.2rem rgba(20,108,148,0.18);
}

.form-control,
.form-select {
    border-radius: 6px;
    border-color: #c8d8de;
}

/* ── Page headings ────────────────────────────────────────────── */
h4 i.bi,
h5 i.bi {
    color: #146c94;
}

/* ── Footer ───────────────────────────────────────────────────── */
footer {
    background: transparent;
    color: #6f8a96 !important;
    font-size: 0.78rem;
    border-color: #c8d8de !important;
}

/* ── Loading progress ring ────────────────────────────────────── */
.loading-progress circle:last-child {
    stroke: #146c94;
}

/* ════════════════════════════════════════════════════════════════
   LOGIN PAGE STYLING — Unified for all apps
   ════════════════════════════════════════════════════════════════ */

/* ── Login background (full viewport gradient) ──────────────────── */
.twr-login-bg {
    background: linear-gradient(145deg, var(--twr-login-bg-start) 0%, var(--twr-login-bg-end) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* ── Login card (white/light centered box) ────────────────────── */
.twr-login-card {
    width: 420px;
    max-width: 90vw;
    border-radius: 1.25rem !important;
    border: none !important;
    box-shadow: 0 20px 60px var(--twr-login-card-shadow) !important;
    background-color: var(--twr-login-card-bg) !important;
}

/* ── Title (app name, split with accent color) ────────────────── */
.twr-login-title {
    color: var(--twr-login-title-color);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 0.25rem !important;
    line-height: 1.2;
}

.twr-login-accent {
    color: var(--twr-login-accent-color);
}

/* ── Tagline (subtitle, small gray text) ──────────────────────── */
.twr-login-tagline {
    color: var(--twr-login-tagline-color);
    font-size: 0.875rem;
    font-weight: 400;
    margin-bottom: 0 !important;
    line-height: 1.4;
}

/* ── Divider (horizontal line between branding and form) ──────── */
.twr-login-divider {
    border: none;
    border-top: 1px solid var(--twr-login-divider-color);
    margin: 1.5rem 0 !important;
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT — Bootstrap 5.3
   ════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
    --bs-body-bg: #14171c;
}

[data-bs-theme="dark"] body {
    color: #e4e9ef;
}

[data-bs-theme="dark"] .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    border-color: rgba(255, 255, 255, 0.15);
    background-color: #1e2126;
    color: #e4e9ef;
}

[data-bs-theme="dark"] footer {
    color: #8a9cb0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dark mode: login page overrides */
[data-bs-theme="dark"] {
    --twr-login-title-color:   #e8f4ff;
    --twr-login-tagline-color: #9fb3c8;
    --twr-login-divider-color: rgba(255, 255, 255, 0.12);
    --twr-login-card-bg:       #1e2126;
    --twr-login-card-shadow:   rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .twr-login-card {
    background-color: var(--twr-login-card-bg) !important;
    box-shadow: 0 20px 60px var(--twr-login-card-shadow) !important;
}

/* Dark mode: form elements */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #4dabf7;
    box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.25);
}

/* Dark mode: buttons */
[data-bs-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #4dabf7, #5db3ff) !important;
    box-shadow: 0 2px 6px rgba(77, 171, 247, 0.3) !important;
}

[data-bs-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #339af0, #4dabf7) !important;
    box-shadow: 0 3px 10px rgba(77, 171, 247, 0.4) !important;
}

[data-bs-theme="dark"] .btn-outline-primary {
    color: #4dabf7;
    border-color: #4dabf7;
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: #4dabf7;
    color: #1e2126;
}