/* ============================================
   MFisio Neto - Login (split layout, light/minimal)

   Accent color: petrol/teal blue, matched to the clinic's own printed
   material (Instagram flyer) rather than the app favicon's bright
   cyan. --login-cyan-strong is the WCAG AA-safe tone used for
   interactive text (button, links, focus); --login-brand-bg is a
   darker shade of the same blue used as a flat, solid panel fill (no
   texture/pattern - the earlier dot-grid was dropped per feedback).

   Everything under .login-panel is scoped there on purpose: this file
   also styles the same page's 2FA / terms / recaptcha follow-up
   dialogs when they render inside #adianti_online_content, so the
   rules must not leak past this page's own markup.
   ============================================ */

:root {
    --login-cyan-strong: #1c7a94;
    --login-cyan-strong-hover: #145e73;
    --login-focus-ring: rgba(28, 122, 148, 0.22);
    --login-bg: #ffffff;
    --login-brand-bg: #114c5c;
    --login-brand-text: #ffffff;
    --login-brand-muted: rgba(255, 255, 255, 0.75);
    --login-text: #0f172a;
    --login-muted: #64748b;
    --login-border: #dbe2ea;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--login-bg) !important;
}

/* --- Page shell: brand panel + form panel --- */
.login-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.login-brand {
    flex: 0 0 42%;
    max-width: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--login-brand-bg);
    padding: 3rem 2rem;
}

.login-brand-inner {
    max-width: 300px;
    text-align: center;
}

.login-brand-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.login-brand-name {
    margin-top: 1.25rem;
    font-family: 'Source Sans Pro Semibold', 'Source Sans Pro', sans-serif;
    font-size: 1.4rem;
    color: var(--login-brand-text);
}

.login-brand-tagline {
    margin: 0.5rem 0 0 0;
    font-size: 0.95rem;
    color: var(--login-brand-muted);
}

.login-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--login-bg);
    padding: 2rem 1.5rem;
}

.login-panel-inner {
    width: 100%;
    max-width: 400px;
}

/* --- De-chrome the Adianti TModalForm card: the panel itself is the card --- */
.login-panel .modal-dialog {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.login-panel .modal-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.login-panel .modal-header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 0 1.5rem 0 !important;
    justify-content: center !important;
}

/* Logo already shown in .login-brand; avoid showing it twice on the form side */
.login-panel .modal-header img {
    display: none !important;
}

.login-panel .modal-body {
    background: transparent !important;
    padding: 0 !important;
}

/* The Adianti TModalForm has no .modal-footer: footer actions render as
   plain buttons after an <hr>, directly inside the form body. */
.login-panel .modal {
    padding: 0 !important;
}

.login-panel hr {
    border-top: 1px solid var(--login-border) !important;
    opacity: 1 !important;
    margin: 1.25rem 0 !important;
}

/* --- Inputs --- */
.login-panel .form-control,
.login-panel input[type="text"],
.login-panel input[type="password"] {
    background-color: #ffffff !important;
    border: 1px solid var(--login-border) !important;
    color: var(--login-text) !important;
    border-radius: 8px !important;
    padding-left: 2.75rem !important;
}

.login-panel .form-control:focus,
.login-panel input[type="text"]:focus,
.login-panel input[type="password"]:focus {
    border-color: var(--login-cyan-strong) !important;
    box-shadow: 0 0 0 0.2rem var(--login-focus-ring) !important;
}

.login-panel .form-floating > label {
    color: var(--login-muted) !important;
    padding-left: 2.75rem !important;
}

/* Leading field icons (user / lock) - plain inline SVGs, no icon font
   dependency. Matched by the field's stable `name` attribute, since
   Adianti's `id` is randomized per request. */
.login-panel .form-floating {
    position: relative !important;
}

.login-panel .form-floating::before {
    content: '';
    position: absolute;
    left: 0.9rem;
    top: 1.75rem;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    pointer-events: none;
    z-index: 5;
}

.login-panel .form-floating:has(> input[name="login"])::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}

.login-panel .form-floating:has(.tpassword > input[name="password"])::before {
    top: 1.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* Password field: the toggle button has no positioning of its own in the
   Adianti markup, so without this it collapses to the top-left corner
   instead of centering next to the typed text. */
.login-panel .tpassword {
    position: relative !important;
}

.login-panel .tpassword > input {
    padding-right: 2.75rem !important;
}

/* The password <input> sits one level deeper than the text field
   (wrapped in .tpassword), so it is never a direct sibling of its
   <label>. Bootstrap's floating-label CSS relies on that sibling
   relationship (:focus ~ label), so it never fires here and the label
   sits on top of the dots. Force the compact/floated label state
   permanently instead of trying to animate it on focus. */
.login-panel .tpassword > input {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.login-panel .form-floating:has(> .tpassword) > label {
    opacity: 0.65 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

.login-panel .tpassword > button {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 0.85rem !important;
    border: none !important;
    background: transparent !important;
    color: var(--login-muted) !important;
    z-index: 4 !important;
    cursor: pointer !important;
}

.login-panel .tpassword > button:hover {
    color: var(--login-cyan-strong) !important;
}

/* --- Primary action --- */
.login-panel .btn-primary,
.login-panel button[name="btn_login"] {
    background-color: var(--login-cyan-strong) !important;
    border-color: var(--login-cyan-strong) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.65rem 1.25rem !important;
}

.login-panel .btn-primary:hover,
.login-panel button[name="btn_login"]:hover {
    background-color: var(--login-cyan-strong-hover) !important;
    border-color: var(--login-cyan-strong-hover) !important;
}

/* --- Secondary actions (reset password / create account) --- */
.login-panel .btn-outline-secondary {
    background: transparent !important;
    border: none !important;
    color: var(--login-cyan-strong) !important;
    font-weight: 600 !important;
}

.login-panel .btn-outline-secondary:hover {
    background: transparent !important;
    color: var(--login-cyan-strong-hover) !important;
}

/* ============================================
   Responsive: 360px up to desktop.
   Below 768px the brand panel collapses to a compact top strip.
   ============================================ */
@media (max-width: 767.98px) {
    .login-shell {
        flex-direction: column;
    }

    .login-brand {
        flex: 0 0 auto;
        max-width: 100%;
        padding: 1.5rem 1.25rem;
    }

    .login-brand-logo {
        width: 56px;
        height: 56px;
    }

    .login-brand-name {
        margin-top: 0.75rem;
        font-size: 1.15rem;
    }

    .login-brand-tagline {
        display: none;
    }

    .login-panel {
        padding: 1.75rem 1.25rem;
    }
}

@media (max-width: 359.98px) {
    .login-brand {
        padding: 1.25rem 1rem;
    }

    .login-panel {
        padding: 1.25rem 0.75rem;
    }
}