/* Dark Mesh login template (isp.auth.login-mesh): dark card over a live ISP network map, form on the right. */
:root {
    --mesh-page: #3a3f4d;
    --mesh-card: #222632;
    --mesh-field: #323846;
    --mesh-field-focus: #2c3341;
    --mesh-blue: #1d90f5;
    --mesh-text: #ffffff;
    --mesh-muted: #8b93a7;
    --mesh-soft: #a9b0c0;
    --mesh-danger: #f87171;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--mesh-page); }
body { font-family: Urbanist, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--mesh-text); -webkit-font-smoothing: antialiased; }
a { color: var(--mesh-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- frame ---- */
.mesh-shell { min-height: 100dvh; padding: 24px; display: flex; }
.mesh-card {
    position: relative; flex: 1; display: flex; overflow: hidden; isolation: isolate;
    background: var(--mesh-card); border-radius: 24px;
    box-shadow: 0 40px 80px -30px rgba(10, 12, 20, .65);
}

/* ---- background network map ---- */
.mesh-map { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .9; }
.mesh-card::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(34, 38, 50, .1) 0%, rgba(34, 38, 50, .3) 46%, rgba(34, 38, 50, .82) 58%, rgba(34, 38, 50, .88) 100%),
        linear-gradient(180deg, rgba(34, 38, 50, .5) 0%, transparent 22%, transparent 78%, rgba(34, 38, 50, .6) 100%);
}
.mesh-pulse { transform-box: fill-box; transform-origin: center; animation: meshPulse 4.4s ease-out infinite; }
@keyframes meshPulse { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(3.4); opacity: 0; } }

/* dashed seam between the map and the form */
.mesh-seam { position: absolute; top: 0; bottom: 0; left: 52%; z-index: 2; width: 140px; height: 100%; pointer-events: none; }
.mesh-seam path { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.2; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; }

/* ---- brand + footer over the map ---- */
.mesh-brand { position: absolute; top: 36px; left: 44px; z-index: 3; display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; color: var(--mesh-text); }
.mesh-brand__dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: radial-gradient(circle at 30% 30%, #5cb4ff, var(--mesh-blue) 60%, #0b6fd0); }
.mesh-brand__name span { color: var(--mesh-blue); }
.mesh-brand__chip { background: #fff; padding: 6px 12px; border-radius: 10px; }
.mesh-brand__chip img { display: block; height: 28px; width: auto; max-width: 180px; object-fit: contain; }
.mesh-foot { position: absolute; left: 44px; bottom: 30px; z-index: 3; margin: 0; font-size: 12.5px; color: var(--mesh-muted); }

/* ---- form column ---- */
.mesh-form-col { position: relative; z-index: 3; margin-left: auto; width: 42%; min-width: 420px; display: flex; align-items: center; padding: 96px 72px 72px 40px; }
.mesh-form { width: 100%; max-width: 400px; }
.mesh-eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--mesh-muted); }
.mesh-title { margin: 0; font-size: clamp(38px, 3.6vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.mesh-title span { color: var(--mesh-blue); }
.mesh-sub { margin: 16px 0 0; font-size: 15px; color: var(--mesh-soft); }

.mesh-alert { margin-top: 24px; padding: 12px 14px; font-size: 14px; color: #fecaca; background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .35); border-radius: 12px; }

.mesh-fields { margin-top: 34px; display: grid; gap: 26px; }
.mf {
    position: relative; padding: 10px 46px 9px 16px; background: var(--mesh-field);
    border: 1.5px solid transparent; border-radius: 14px; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.mf label { display: flex; align-items: center; gap: 5px; margin: 0 0 2px; font-size: 11.5px; font-weight: 500; color: var(--mesh-muted); cursor: text; }
.mf label i { font-size: 13px; }
.mf input { display: block; width: 100%; padding: 2px 0; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--mesh-text); background: transparent; border: 0; outline: none; }
.mf input::placeholder { color: #6b7385; font-weight: 500; }
.mf input:-webkit-autofill { -webkit-text-fill-color: var(--mesh-text); transition: background-color 9999s; }
.mf:focus-within { border-color: var(--mesh-blue); background: var(--mesh-field-focus); box-shadow: 0 0 0 4px rgba(29, 144, 245, .14); }
.mf:focus-within label { color: var(--mesh-blue); }
.mf:has(.input-error) { border-color: var(--mesh-danger); }
.mf .validation-message { position: absolute; left: 4px; top: calc(100% + 5px); font-size: 12px; font-weight: 500; color: var(--mesh-danger); }
.mf .toggle-password { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding: 6px; display: flex; color: var(--mesh-muted); background: none; border: 0; border-radius: 8px; cursor: pointer; font-size: 18px; }
.mf .toggle-password:hover { color: var(--mesh-text); }
.mf .toggle-password:focus-visible { outline: 2px solid var(--mesh-blue); }

.mesh-remember { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; font-size: 14px; color: var(--mesh-soft); cursor: pointer; }
.mesh-remember input { width: 16px; height: 16px; accent-color: var(--mesh-blue); }

.mesh-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.mesh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 34px;
    font: inherit; font-size: 15px; font-weight: 600; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
    transition: background-color .15s, transform .15s;
}
.mesh-btn:hover { text-decoration: none; }
.mesh-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-login.mesh-btn { min-width: 170px; color: #fff; background: var(--mesh-blue); box-shadow: 0 14px 30px -10px rgba(29, 144, 245, .7); }
.btn-login.mesh-btn:hover { background: #1a82dd; }
.btn-login.mesh-btn:disabled { opacity: .75; cursor: default; }
.mesh-btn--ghost { color: #e5e7eb; background: #4a5163; }
.mesh-btn--ghost:hover { background: #555d70; color: #fff; }

/* auth.js swaps in Bootstrap's spinner markup; Bootstrap is not loaded here. */
.spinner-border { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: meshSpin .7s linear infinite; }
.me-2 { margin-right: 6px; }
@keyframes meshSpin { to { transform: rotate(360deg); } }

/* ---- smaller screens: map stays as a dimmed backdrop, form takes the card ---- */
@media (max-width: 991.98px) {
    .mesh-shell { padding: 0; }
    .mesh-card { border-radius: 0; flex-direction: column; }
    .mesh-card::after { background: rgba(34, 38, 50, .86); }
    .mesh-seam { display: none; }
    .mesh-brand { position: relative; top: auto; left: auto; padding: 28px 24px 0; }
    .mesh-form-col { width: 100%; min-width: 0; flex: 1; padding: 40px 24px 32px; margin: 0; justify-content: center; }
    .mesh-foot { position: relative; left: auto; bottom: auto; padding: 0 24px 24px; }
}
@media (max-width: 420px) {
    .mesh-actions .mesh-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mesh-packets { display: none; }
    .mesh-pulse, .spinner-border { animation: none; }
}