/* Dhruvix sign-in pages. auth.js adds the logo slot and the scene card; dawn.js
   (built by brand/console/dawn/build.py) draws the scene and, each time the
   sign-in page opens, plays the night-to-day opening by moving the --dx-* colours below from
   night to day. Everything here reads those colours, so it follows along. The
   defaults are the day colours: if the opening never runs, the page is simply day.
   Applies only while <html> has .dx-auth (any /auth route).
   Phone: logo, then the scene card, then the form. Laptop: form on the left, card on the right. */

html.dx-auth {
    --dx-paper: #F5F4F2; --dx-surface: #FFFFFF; --dx-ink: #1C1917; --dx-body: #44403C;
    --dx-muted: #78716C; --dx-hair: #E7E5E4; --dx-place: #A8A29E; --dx-dawn: #E8662C;
}
html.dx-auth, html.dx-auth body { background: var(--dx-paper) !important; overflow-x: hidden; }
html.dx-auth form input, html.dx-auth form button, html.dx-auth .max-w-md { box-sizing: border-box !important; }
html.dx-auth form .btn-wrapper { display: flex !important; width: 100%; }
html.dx-auth form .btn-wrapper button { width: 100%; }

/* ---- logo slot and scene card */
#dx-auth-logo { position: absolute; z-index: 2; left: 20px; top: max(22px, env(safe-area-inset-top)); width: 110px; }
#dx-auth-logo svg { width: 100%; height: auto; display: block; }
#dx-auth-card { position: absolute; z-index: 1; left: 16px; right: 16px; top: calc(max(22px, env(safe-area-inset-top)) + 48px); height: 300px;
    border-radius: 24px; overflow: hidden; border: 1px solid var(--dx-hair); box-shadow: 0 24px 48px rgba(0, 0, 0, .16); }
#dx-auth-card .dxd-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Tamaso ma jyotirgamaya, two quiet lines: under the card on a phone, in the card's
   bottom-right corner on a laptop. Fades in once day has broken (auth.js adds .in). */
#dx-auth-verse { position: absolute; z-index: 2; right: 20px; top: calc(max(22px, env(safe-area-inset-top)) + 48px + 300px + 10px);
    text-align: right; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
#dx-auth-verse.in { opacity: 1; }
#dx-auth-verse .dv { display: block; color: var(--dx-body); font: 600 14px/1.5 'Noto Sans Devanagari', 'Kohinoor Devanagari', Inter, system-ui, sans-serif; }
#dx-auth-verse .mn { display: block; color: var(--dx-muted); font: italic 400 12.5px/1.45 Inter, 'Noto Sans Devanagari', system-ui, sans-serif; }

/* the opening's overlay: the lorry and the bloom of light */
#dxd-over { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
#dxd-bloom { position: fixed; left: 0; top: 0; width: 160vmax; height: 160vmax; border-radius: 50%; opacity: 0; will-change: transform, opacity;
    background: radial-gradient(circle, rgba(255, 250, 240, 1) 0%, rgba(255, 236, 212, .9) 20%, rgba(255, 214, 172, .5) 42%, rgba(255, 200, 150, .14) 60%, rgba(255, 200, 150, 0) 74%); }
#dxd-lorryWrap { position: fixed; inset: 0; }
#dxd-lorry { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#dxd-lorry > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#dxd-skew, #dxd-turn { position: absolute; inset: 0; } #dxd-turn { transform-style: preserve-3d; }
.dxd-slice { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ---- the form */
html.dx-auth .min-h-screen.items-center.justify-center {
    position: relative; z-index: 3; background: transparent !important; align-items: flex-start !important;
    padding: calc(max(22px, env(safe-area-inset-top)) + 48px + 300px + 64px) 0 0 !important;
}
html.dx-auth .min-h-screen.items-center.justify-center > .max-w-md { max-width: none; padding: 0 20px max(32px, env(safe-area-inset-bottom)); }
html.dx-auth .max-w-md img { display: none !important; }                          /* upstream logo tile */
html.dx-auth .max-w-md h2 { margin: 0 !important; text-align: left !important; color: var(--dx-ink) !important;
    font: 700 28px/1.2 Inter, 'Noto Sans Devanagari', system-ui, sans-serif !important; letter-spacing: -.025em; }
html.dx-auth .max-w-md .dx-sub { margin: 8px 0 0; color: var(--dx-muted); font: 400 15px/1.5 Inter, 'Noto Sans Devanagari', system-ui, sans-serif; }
html.dx-auth .max-w-md p { color: var(--dx-muted); }
html.dx-auth form { margin-top: 24px !important; }

html.dx-auth form .rounded-md.shadow-sm { box-shadow: none !important; }
html.dx-auth form .-mt-px { margin-top: 12px !important; }
html.dx-auth form input[type=email], html.dx-auth form input[type=password], html.dx-auth form input[type=text], html.dx-auth form input[type=tel] {
    height: 50px; padding: 0 16px !important; border-radius: 12px !important;
    background: var(--dx-surface) !important; border: 1px solid var(--dx-hair) !important; color: var(--dx-ink) !important;
    font: 400 16px/1 Inter, 'Noto Sans Devanagari', system-ui, sans-serif !important; box-shadow: none !important;
}
html.dx-auth form input::placeholder { color: var(--dx-place) !important; }
html.dx-auth form input:focus { border-color: var(--dx-dawn) !important; box-shadow: 0 0 0 3px rgba(232, 102, 44, .2) !important; outline: none !important; }
html.dx-auth form input[type=checkbox] { accent-color: var(--dx-dawn); width: 18px; height: 18px; border-radius: 5px; }
html.dx-auth form label { color: var(--dx-body) !important; font-size: 14px; }
html.dx-auth a, html.dx-auth form a { color: var(--dx-dawn) !important; font-weight: 600; }

/* buttons: the main action in dawn orange, the other quiet. The shipper add-ons
   (customer portal, order tracking) are not for fleet owners, so they are dropped. */
html.dx-auth form .mt-6.space-y-4 > :nth-child(n+3) { display: none !important; }
html.dx-auth form .mt-6.space-y-4 { margin-top: 24px !important; }
html.dx-auth .max-w-md .btn-wrapper { display: flex !important; flex: 1 1 0; width: 100%; }
html.dx-auth .max-w-md .flex.space-x-2 > *, html.dx-auth .max-w-md .flex.flex-row.space-x-2 > * { flex: 1 1 0; }
html.dx-auth .max-w-md .btn { width: 100%; min-height: 50px; height: auto; padding: 12px 16px !important; border-radius: 12px !important; justify-content: center;
    font: 600 16px/1.2 Inter, 'Noto Sans Devanagari', system-ui, sans-serif !important; white-space: normal; }
html.dx-auth .max-w-md .btn svg, html.dx-auth .max-w-md .btn .btn-icon-wrapper { display: none !important; }
html.dx-auth .max-w-md .btn-primary {
    background: var(--dx-dawn) !important; border: 0 !important; color: #fff !important;
    box-shadow: 0 8px 22px -10px rgba(232, 102, 44, .7) !important; transition: filter .15s ease, transform .15s ease;
}
html.dx-auth .max-w-md .btn-primary:hover { filter: brightness(1.06); }
html.dx-auth .max-w-md .btn-primary:active { transform: scale(.99); }
html.dx-auth .max-w-md .btn-default { background: var(--dx-surface) !important; border: 1px solid var(--dx-hair) !important; color: var(--dx-ink) !important; box-shadow: none !important; }
html.dx-auth .max-w-md .btn-default:hover { filter: brightness(.98); }

/* the card some sign-in pages wrap their form in, and their notes */
html.dx-auth .max-w-md > .rounded-lg.shadow { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
html.dx-auth .max-w-md .my-6 { background: var(--dx-surface) !important; border: 1px solid var(--dx-hair) !important; border-radius: 12px !important; color: var(--dx-body) !important; }
html.dx-auth .max-w-md .my-6 * { color: var(--dx-body) !important; }
html.dx-auth .max-w-md .my-6 svg { color: var(--dx-dawn) !important; }
html.dx-auth .max-w-md .text-gray-700, html.dx-auth .max-w-md .text-gray-500, html.dx-auth .max-w-md .text-gray-900 { color: var(--dx-body) !important; }

/* keep the attribution line (the AGPL notice lives behind its Legal link), quietly */
html.dx-auth .max-w-md > :last-child { margin-top: 26px; opacity: .6; }

/* ---- laptop: form on the left, scene card on the right */
@media (min-width: 960px) {
    #dx-auth-logo { position: fixed; left: 72px; top: 40px; width: 124px; }
    #dx-auth-verse { position: fixed; top: auto; right: 52px; bottom: 46px; }
    #dx-auth-verse .dv { font-size: 16px; }
    #dx-auth-verse .mn { font-size: 13.5px; }
    #dx-auth-card { position: fixed; left: 540px; right: 24px; top: 24px; bottom: 24px; height: auto; border-radius: 28px; box-shadow: 0 30px 60px rgba(0, 0, 0, .16); }
    html.dx-auth .min-h-screen.items-center.justify-center { align-items: center !important; justify-content: flex-start !important; padding: 0 !important; }
    html.dx-auth .min-h-screen.items-center.justify-center > .max-w-md {
        width: 540px; max-width: none; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 96px 72px 48px;
    }
    html.dx-auth .max-w-md > * { max-width: 396px; width: 100%; }
    html.dx-auth .max-w-md h2 { font-size: 32px !important; }
}

/* show / hide password (dhruvix/auth.js): an eye button inside the box, on the
   sign-in, reset and create-account pages */
input.dx-has-eye { padding-right: 52px !important; }
.dx-eye {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%); z-index: 11;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9px; background: transparent;
    display: grid; place-items: center; color: var(--dx-muted, #8A93A6); cursor: pointer; transition: color .15s ease, background .15s ease;
}
.dx-eye:hover { color: var(--dx-ink, #fff); background: rgba(128, 128, 128, .1); }
.dx-eye:focus-visible { outline: 2px solid #E8662C; outline-offset: 1px; }
.dx-eye[aria-pressed="true"] { color: #F08A2C; }
html:not(.dx-auth) .dx-eye { color: #6B7280; }
html:not(.dx-auth) .dx-eye:hover { color: #111318; background: rgba(0, 0, 0, .05); }

/* sign-in hand-off (dhruvix/auth.js): the first frame of the owner app's opening
   animation, shown the moment sign-in succeeds until the app takes over */
#dx-handoff { position: fixed; inset: 0; z-index: 100000; background: #0B0C0F; display: flex; align-items: center; justify-content: center; }
#dx-handoff img { width: min(66vw, 380px); height: auto; display: block; }