/* ============================================================================
   Ventrax — application
   ----------------------------------------------------------------------------
   The same visual language as ventraxerp.com: teal, a serif for headings, a
   plain sans for everything read at length. Somebody moving from the website
   to the application should not feel they have arrived somewhere else.

   Denser than the marketing site, because this is a tool rather than a
   brochure. People will be in it all day.

   No web fonts and no external anything — same reasoning as the website, with
   one addition: this is a business system, and a page that waits on somebody
   else's CDN is a page that stops working when they have an outage.
   ========================================================================== */

:root {
    --ink:        #0B1815;
    --ink-2:      #12241F;
    --slate:      #52625C;
    --slate-2:    #7B8A84;
    --paper:      #F3F6F5;
    --surface:    #FFFFFF;
    --line:       #DCE4E1;
    --line-soft:  #E9EFED;

    --teal-900:   #0A3A34;
    --teal-700:   #0F5C51;
    --teal:       #14806F;
    --teal-dim:   #E3F0EC;
    --teal-line:  #BFDCD3;

    --brass:      #A8763D;
    --brass-dim:  #F5EEE1;
    --bad:        #B3261E;
    --bad-dim:    #FBEBEA;

    --radius:     10px;
    --radius-sm:  6px;

    --serif: Iowan Old Style, Palatino Linotype, Palatino, Georgia, "Times New Roman", serif;
    --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --shadow:      0 1px 2px rgba(11,24,21,.06), 0 1px 3px rgba(11,24,21,.05);
    --shadow-lift: 0 8px 28px rgba(11,24,21,.12);

    --ease: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 15.5px/1.6 var(--sans);
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0 0 .4em;
}

h1 { font-size: 27px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

a { color: var(--teal-700); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }

p { margin: 0 0 1em; }
.muted { color: var(--slate); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- app bar */

.bar {
    background: var(--teal-900);
    color: #fff;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.bar-brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.bar-brand:hover { text-decoration: none; }
.bar-brand img { width: 28px; height: 28px; display: block; }
.bar-brand strong { font-family: var(--serif); font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }

.bar-right { display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: #BFE3DA; }
.bar-right a { color: #BFE3DA; }
.bar-right a:hover { color: #fff; }

.bar-who {
    display: flex; align-items: center; gap: 9px;
}
.bar-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700; color: #fff;
}

@media (max-width: 560px) {
    .bar { padding: 0 16px; }
    .bar-who span { display: none; }
}

/* ---------------------------------------------------------------- layout */

.wrap { max-width: 900px; margin: 0 auto; padding: 32px 24px 64px; }
.wrap-narrow { max-width: 440px; }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

.panel + .panel { margin-top: 16px; }

.page-head { margin-bottom: 24px; }
.page-head p { color: var(--slate); margin: 4px 0 0; font-size: 14.5px; max-width: 62ch; }

/* ----------------------------------------------------------------- forms */

label { display: block; margin-bottom: 18px; }
label > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

input[type="text"], input[type="email"], input[type="password"] {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}

input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-dim);
}

label:focus-within > span { color: var(--teal-700); }

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    min-height: 46px;
    border: 1px solid var(--teal);
    border-radius: var(--radius-sm);
    background: var(--teal);
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s var(--ease), transform .08s var(--ease);
}

button:hover, .btn:hover { background: var(--teal-900); border-color: var(--teal-900); text-decoration: none; }
button:active { transform: translateY(1px); }

button[disabled] { opacity: .75; cursor: progress; }

.btn-quiet {
    background: transparent; color: var(--ink); border-color: var(--line);
}
.btn-quiet:hover { background: var(--paper); color: var(--ink); border-color: var(--slate-2); }

.full { width: 100%; }

/* ---------------------------------------------------------------- alerts */

.alert {
    background: var(--bad-dim);
    color: var(--bad);
    border: 1px solid #F0C9C6;
    border-left: 3px solid var(--bad);
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 20px;
    animation: rise .3s var(--ease);
}

.note {
    background: var(--teal-dim);
    border: 1px solid var(--teal-line);
    color: var(--teal-900);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin: 0;
}

/* ------------------------------------------------------------------ facts */

.facts { display: grid; grid-template-columns: 170px 1fr; gap: 12px 20px; margin: 0; font-size: 14.5px; }
.facts dt { color: var(--slate); }
.facts dd { margin: 0; }
.facts dd.mono { font-size: 12.5px; color: var(--slate); word-break: break-all; }

@media (max-width: 520px) {
    .facts { grid-template-columns: 1fr; gap: 3px 0; }
    .facts dt { font-size: 12px; margin-top: 10px; }
}

.tag {
    display: inline-flex; align-items: center;
    font-family: var(--mono); font-size: 11.5px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    background: var(--teal-dim); color: var(--teal-700);
}

/* ------------------------------------------------------------- sign in */

.signin-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* A faint survey grid, as on the website hero. The two should feel like
       one company. */
    background:
        linear-gradient(rgba(11,24,21,.022) 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(90deg, rgba(11,24,21,.022) 1px, transparent 1px) 0 0 / 42px 42px,
        var(--paper);
}

.signin-card { width: 100%; max-width: 400px; }

.signin-mark {
    display: block;
    width: 66px;
    height: 66px;
    margin: 0 auto 22px;
}

.signin-card h1 { text-align: center; font-size: 25px; margin-bottom: 4px; }
.signin-card .sub { text-align: center; color: var(--slate); font-size: 14px; margin-bottom: 26px; }

.signin-foot {
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: var(--slate-2);
}

/* ============================================================================
   Waiting
   ----------------------------------------------------------------------------
   The mark turns while something is happening.

   Only after a delay. On a fast connection a spinner that appears for 80ms is
   a flicker that makes an instant action look unreliable; on a slow one, its
   absence makes a working page look broken. The threshold is what turns it
   from decoration into information.
   ========================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.is-working .signin-mark,
.spinning {
    animation: spin 1.1s linear infinite;
    transform-origin: 50% 50%;
}

/* The button says what it is doing rather than going quiet. */
.spinner {
    width: 15px; height: 15px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

/* A full-page cover for a navigation that is taking its time. */
.waiting {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(243,246,245,.86);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    animation: fade-in .18s var(--ease);
}

.waiting img { width: 54px; height: 54px; animation: spin 1.1s linear infinite; }
.waiting p { color: var(--slate); font-size: 14px; margin: 0; }

.signin-card, .panel { animation: rise .34s var(--ease) backwards; }
.panel:nth-of-type(2) { animation-delay: .06s; }

/* ------------------------------------------------------------------ error */

.error-page { text-align: center; }
.error-code {
    font-family: var(--mono);
    font-size: 46px;
    font-weight: 700;
    color: var(--teal-line);
    margin: 0 0 6px;
}
.error-reference {
    font-size: 13.5px;
    color: var(--slate);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 22px 0 0;
}
.error-reference strong { font-family: var(--mono); color: var(--ink); }

/* --------------------------------------------------------------- motion off
   For some people this is nausea rather than polish, and a business system is
   the last place to insist on it. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    /* The spinner still needs to convey that something is happening, so it
       keeps turning — slowly, and without the sweep. */
    .spinner, .waiting img, .is-working .signin-mark {
        animation: spin 2s linear infinite !important;
    }
}