/* ============================================================ Sign in / Access denied Standalone pages: no sidebar, no navigation, nothing that reveals the shape of the system to someone not yet in it. The palette matches the staff sidebar so signing in feels like the front door of the same building. ============================================================ */ /* The body is NOT the flex container, deliberately. Free hosting injects its own markup — a "Web hosting by Somee.com" link and a footer banner — directly into the page. Anything injected becomes a child of , so when is itself a flex row those injected elements are laid out BESIDE the sign-in card instead of below it. That is what put a hosting link floating in the middle of the login screen. Centring moved to a wrapper the injected markup is not inside. Body goes back to normal block flow, so whatever the host appends stacks underneath where it belongs. */ .acc-body { min-height: 100vh; margin: 0; background: linear-gradient(160deg, #15343b 0%, #0d2229 100%); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } /* min-height, not height: injected content can push the page taller and the gradient has to keep going rather than cutting off into white. */ .acc-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .acc-card { width: 100%; max-width: 380px; background: #fff; border-radius: 16px; padding: 32px 30px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); } .acc-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid #eef0f3; } /* The card is already white, so the logo needs no chip here — unlike the sidebar and the guest page, where it sits on near-black. */ .acc-logo { width: 48px; height: 48px; flex-shrink: 0; } .acc-logo img { display: block; width: 100%; height: 100%; object-fit: contain; } .acc-clinic { font-size: .92rem; font-weight: 700; color: #15343b; line-height: 1.2; } .acc-sub { font-size: .74rem; color: #8a9299; letter-spacing: .02em; margin-top: 2px; } .acc-title { font-size: 1.35rem; font-weight: 700; color: #1f2430; margin: 0 0 4px; letter-spacing: -0.01em; } .acc-hint { font-size: .84rem; color: #6b7280; margin: 0 0 18px; line-height: 1.5; } .acc-error { display: flex; align-items: center; gap: 8px; background: #fdecea; color: #a1322b; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: .84rem; font-weight: 600; } .acc-field { margin-bottom: 14px; } .acc-field label { display: block; font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: 6px; } .acc-field input { width: 100%; border: 1px solid #d7dbe0; border-radius: 9px; padding: 11px 13px; font-size: .92rem; color: #1f2430; background: #fff; } .acc-field input:focus { outline: none; border-color: #2e9ba3; box-shadow: 0 0 0 3px rgba(46, 155, 163, .15); } .acc-password { position: relative; } .acc-password input { padding-right: 44px; } .acc-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: none; color: #9ca3af; cursor: pointer; border-radius: 6px; } .acc-toggle:hover { color: #374151; background: #f1f3f6; } .acc-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 12px; border: none; border-radius: 9px; background: #2e9ba3; color: #fff; font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color 150ms ease; } .acc-submit:hover { background: #26838a; color: #fff; } .acc-submit-link { margin-top: 20px; } .acc-foot { margin: 18px 0 0; font-size: .78rem; color: #9ca3af; text-align: center; line-height: 1.5; } /* ---------- Access denied ---------- */ .acc-card-denied { text-align: center; max-width: 420px; } .acc-denied-icon { display: block; font-size: 2.4rem; color: #d98b0a; margin-bottom: 12px; }