/* =============================================================================
   drawing-login.css — the Drawing portal's sign-in, on top of the ERP's
   lnx-login.css: same layout and form, but the left side is a drafting
   room — a blueprint sheet (Views/Shared/_BlueprintScene.cshtml) instead of
   the ERP's plant, in blueprint blue and cyan ink.
   ============================================================================= */

/* ---------- the brand mark (also used in the top bar: drawing-bridge.css) ---------- */
.dp-logo { display: inline-flex; align-items: center; gap: .55rem; font: 500 1.45rem/1 "Jost", sans-serif; letter-spacing: -.01em; color: #fff; text-decoration: none; }
.dp-logo b { font-weight: 700; }
.dp-logo em { font-style: normal; color: #22d3ee; margin: 0 .04em; }
.dp-mark { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; flex: none;
    background: linear-gradient(135deg, #22d3ee, #2563eb); color: #fff; box-shadow: 0 10px 22px -10px rgba(34, 211, 238, .9); }
.dp-mark svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the drafting room: blueprint blue ---------- */
.lx-art { background: radial-gradient(120% 90% at 15% 0%, #12407a 0%, #0a2850 50%, #061a36 100%); }
.lx-aurora { opacity: .55; }
.lx-aurora i:nth-child(1) { background: #1d4ed8; }
.lx-aurora i:nth-child(2) { background: #06b6d4; }
.lx-aurora i:nth-child(3) { background: #0ea5e9; opacity: .35; }
/* a flat drafting grid (minor + major) instead of the plant's moving floor */
.lx-floor { inset: 0; left: 0; right: 0; bottom: 0; height: auto; transform: none; animation: none;
    background-image:
        linear-gradient(rgba(125, 211, 252, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 211, 252, .16) 1px, transparent 1px),
        linear-gradient(rgba(125, 211, 252, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 211, 252, .06) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 60%, #000 35%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 60%, #000 35%, transparent 85%); }
.lx-glow { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(34, 211, 238, .18), transparent 60%); }
.lx-grad { background-image: linear-gradient(90deg, #67e8f9, #93c5fd, #a5f3fc, #67e8f9); }
.lx-trust svg { stroke: #67e8f9; }

/* ---------- the sheet ---------- */
/* fill the space between the headline and the footer and scale the whole sheet to fit it (owner 2026-10-19: the top
   was cut off on shorter windows — full width was taller than the space, and the stage hides what does not fit) */
.lx-stage .dp-scene { width: 100%; height: 100%; max-width: 900px; overflow: visible; }
.dp-scene text { font: 600 9px "Jost", ui-monospace, monospace; fill: #bae6fd; letter-spacing: .04em; }
.dp-sheet { fill: rgba(8, 47, 92, .35); stroke: rgba(125, 211, 252, .45); stroke-width: 1.2; }
.dp-ticks path { stroke: rgba(125, 211, 252, .4); stroke-width: 1; }
.dp-centre { fill: none; stroke: rgba(251, 191, 36, .55); stroke-width: .9; stroke-dasharray: 14 3 2 3; }

/* outlines draw themselves */
.dp-draw { fill: rgba(56, 189, 248, .06); stroke: #e0f2fe; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 900; stroke-dashoffset: 900; animation: dp-draw 1.6s cubic-bezier(.45, .05, .25, 1) var(--d, 0s) forwards; }
.dp-thin { stroke-width: 1.1; fill: none; }
@keyframes dp-draw { to { stroke-dashoffset: 0; } }
.dp-hidden { fill: none; stroke: rgba(186, 230, 253, .55); stroke-width: .9; stroke-dasharray: 4 3; opacity: 0; animation: dp-fade .8s ease 1.6s forwards; }
.dp-hatch path { stroke: rgba(186, 230, 253, .35); stroke-width: .8; }
.dp-hatch { opacity: 0; animation: dp-fade .8s ease 1.8s forwards; }

/* dimensions */
.dp-dim { opacity: 0; animation: dp-fade .9s ease 2s forwards; }
.dp-ext { fill: none; stroke: rgba(125, 211, 252, .5); stroke-width: .8; }
.dp-dimline { fill: none; stroke: #7dd3fc; stroke-width: 1; }
.dp-arrow { fill: #7dd3fc; }
.dp-dim text { fill: #7dd3fc; font-size: 9.5px; }

/* BOM balloons pop onto the parts */
.dp-balloons g { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dp-pop .45s cubic-bezier(.3, 1.6, .5, 1) var(--d) forwards; }
.dp-balloons path { fill: none; stroke: #fbbf24; stroke-width: 1; }
.dp-balloons circle { fill: #0a2850; stroke: #fbbf24; stroke-width: 1.4; }
.dp-balloons text { fill: #fde68a; font-size: 10px; font-weight: 700; text-anchor: middle; }
@keyframes dp-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* BOM list + title block */
.dp-box { fill: rgba(6, 26, 54, .75); stroke: rgba(125, 211, 252, .55); stroke-width: 1; }
.dp-rule { fill: none; stroke: rgba(125, 211, 252, .35); stroke-width: .8; }
.dp-bom, .dp-title { opacity: 0; animation: dp-fade .7s ease 2.2s forwards; }
.dp-th { fill: #67e8f9 !important; font-size: 8px !important; letter-spacing: .12em !important; }
.dp-row { opacity: 0; animation: dp-row .45s ease var(--d) forwards; }
.dp-row text:first-child { fill: #fde68a; }
@keyframes dp-row { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.dp-tb-name { fill: #e0f2fe !important; font-size: 9px !important; }
.dp-tb-k { fill: rgba(186, 230, 253, .6) !important; font-size: 7.5px !important; letter-spacing: .1em !important; }
.dp-tb-v { fill: #e0f2fe !important; }
.dp-rev { fill: #fde68a !important; }
.dp-stamp { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dp-stamp .5s cubic-bezier(.3, 1.6, .5, 1) 4.1s forwards; }
.dp-stamp rect { fill: rgba(52, 211, 153, .16); stroke: #34d399; stroke-width: 1; }
.dp-stamp text { fill: #6ee7b7 !important; font-size: 7.5px !important; font-weight: 700 !important; letter-spacing: .1em !important; }
@keyframes dp-stamp { from { opacity: 0; transform: scale(1.8) rotate(-8deg); } to { opacity: 1; transform: rotate(-4deg); } }

/* the scan line sweeps the sheet, over and over */
.dp-scan { opacity: 0; animation: dp-scan 6s ease-in-out 4.6s infinite; }
@keyframes dp-scan { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(520px); } }
@keyframes dp-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .dp-draw { animation: none; stroke-dashoffset: 0; }
    .dp-hidden, .dp-hatch, .dp-dim, .dp-balloons g, .dp-bom, .dp-title, .dp-row, .dp-stamp { animation: none; opacity: 1; }
    .dp-scan { display: none; }
}

/* ---------- the form keeps the ERP look, with the portal's cyan-blue action ---------- */
.lx-btn { background-image: linear-gradient(110deg, #1d4ed8, #0891b2 60%, #1d4ed8); }
.lx-btn:hover:not(:disabled) { box-shadow: 0 18px 32px -14px rgba(8, 145, 178, 1); }
.lx-greet { color: #1d4ed8; }

/* auth-login.js's show / hide password icon (a Lucide svg replacing an <i>): on the right, not over the lock */
.lx-field > #togglePassword { left: auto; right: .95rem; top: 1.08rem; width: 1.15rem; height: 1.15rem; stroke: #9ca3af; cursor: pointer; }
.lx-field > #togglePassword:hover { stroke: #1d4ed8; }
@media (max-height: 820px) { .lx-field > #togglePassword { top: .92rem; } }

/* the sign-in side scrolls when it is taller than the window (owner 2026-10-19: "scroll issue" — the Test sign-in
   list was cut off), and the long test list scrolls inside its own box so the form stays in view */
.lx-panel { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lx-devlogin-list { max-height: min(30vh, 16rem); overflow-y: auto; scrollbar-width: thin; padding-right: .15rem; }