/* Novus account pages (sign-in, sign-up, password, verification, tenant) — layout only.
   Colours, materials and the backdrop come from nvs-core.css. Brand panel and form side
   follow the visitor's scheme (.nvs-auto). Metronic form markup is kept for default.js / FormValidation. */

.nvs-auth{--nvs-auth-edge:32px;--nvs-auth-bar:58px;--nvs-auth-card:500px;/* gap between the centre divider and the form card; the showcase keeps the same gap on its side */--nvs-auth-form-gap:calc((100cqw * 1.1 / 2.1 - var(--nvs-auth-card)) / 2);container-type:inline-size;--nvs-auth-foot-lh:22px;position:fixed;inset:0;z-index:10;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:100%;overflow:auto;background:var(--nvs-night)}
.nvs-auth.no-brand{grid-template-columns:minmax(0,1fr)}

/* brand panel. The top row sits on the same 58px bar axis as the shell (--nvs-auth-bar); the footer rows of both columns share --nvs-auth-edge. */
.nvs-auth-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:26px;padding:0 var(--nvs-gutter) var(--nvs-auth-edge);background:var(--nvs-page);box-shadow:var(--nvs-panel-shadow)}
.nvs-auth-brand > :not(.nvs-glow):not(.nvs-orn){position:relative;z-index:1}
/* one light per corner across the whole screen: red top-right (form side), blue bottom-left (brand side) */
.nvs-auth-brand .nvs-glow .g1,.nvs-auth-brand .nvs-glow .g3{display:none}
.nvs-auth-top{min-height:0}
.nvs-auth-show{--nvs-auth-show-gap:max(0px,calc(var(--nvs-auth-form-gap) - var(--nvs-gutter)));align-self:flex-end;width:min(560px,calc(100% - var(--nvs-auth-show-gap)));margin:auto var(--nvs-auth-show-gap) auto 0;display:grid;gap:26px}
.nvs-auth-mid{display:grid;gap:14px}
.nvs-auth-mid .nvs-badge{justify-self:start}
.nvs-auth-mid h2{font:700 42px/1.14 var(--nvs-font);letter-spacing:-.035em;margin:0;color:var(--nvs-ink)}
.nvs-auth-mid p{font-size:17px;line-height:1.6;color:var(--nvs-ink-3);margin:0;max-width:46ch}

/* product preview: an abstract, slightly tilted miniature of the shell */
.nvs-auth-stage{position:relative;height:300px;max-width:560px;perspective:1400px}
.nvs-auth-app{position:absolute;inset:0 56px 0 0;display:grid;grid-template-columns:58px minmax(0,1fr);overflow:hidden;border-radius:20px;background:var(--nvs-pop-bg);border:1px solid var(--nvs-line);box-shadow:var(--nvs-pop-shadow);transform:rotateY(-13deg) rotateX(7deg);transform-origin:left center;animation:nvsStageIn .9s var(--nvs-ease) backwards .1s}
.nvs-auth-app-sb{display:grid;align-content:start;justify-items:center;gap:12px;padding:16px 0;border-right:1px solid var(--nvs-line-soft)}
.nvs-auth-app-sb i{width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--k,var(--nvs-mute)) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k,var(--nvs-mute)) 26%,transparent)}
.nvs-auth-app-sb i.lg{width:30px;height:30px;margin-bottom:6px;border-radius:9px;background:var(--nvs-red-tile);box-shadow:var(--nvs-tile-shadow)}
.nvs-auth-app-main{display:grid;align-content:start;gap:14px;padding:16px}
.nvs-auth-app-tabs{display:flex;gap:6px}
.nvs-auth-app-tabs span{width:74px;height:20px;border-radius:7px;background:var(--nvs-card-bg);border:1px solid var(--nvs-card-line)}
.nvs-auth-app-tabs span.on{width:92px;border-color:var(--nvs-acc-line);box-shadow:inset 0 -2px 0 var(--nvs-acc-strong)}
.nvs-auth-app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.nvs-auth-tile{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--nvs-card-bg);border:1px solid var(--nvs-card-line)}
.nvs-auth-tile .nvs-tl{width:30px;height:30px;border-radius:9px}
.nvs-auth-tile div,.nvs-auth-float div{flex:1;min-width:0;display:grid;gap:6px}
.nvs-auth-tile b,.nvs-auth-tile small,.nvs-auth-float b,.nvs-auth-float small{display:block;height:6px;border-radius:4px;background:var(--nvs-line)}
.nvs-auth-tile b,.nvs-auth-float b{width:78%;background:color-mix(in srgb,var(--nvs-ink) 22%,transparent)}
.nvs-auth-tile small,.nvs-auth-float small{width:52%}
.nvs-auth-float{position:absolute;display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--nvs-pop-bg);border:1px solid var(--nvs-pop-line);box-shadow:var(--nvs-pop-shadow);animation:nvsRise .7s cubic-bezier(.2,.75,.2,1) backwards}
.nvs-auth-float.f1{right:0;top:22px;width:168px;height:104px;align-items:flex-end;animation-delay:.45s}
.nvs-auth-float.f1 .bars{display:flex;align-items:flex-end;gap:7px;width:100%;height:100%}
.nvs-auth-float.f1 .bars i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--nvs-tone-2) 45%,transparent)}
.nvs-auth-float.f1 .bars i.hi{background:var(--nvs-red-tile)}
.nvs-auth-float.f2{left:24px;bottom:-14px;width:210px;animation-delay:.6s}
.nvs-auth-float.f2 .nvs-tl{width:34px;height:34px;--tg:linear-gradient(140deg,var(--nvs-tone-5),color-mix(in srgb,var(--nvs-tone-5) 60%,var(--nvs-night)))}
.nvs-auth-float.f2 .nvs-ic{width:16px;height:16px}
@keyframes nvsStageIn{from{opacity:0;transform:rotateY(-24deg) rotateX(12deg) translateY(18px)}}

.nvs-auth-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:560px}
.nvs-auth-list li{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--nvs-ink-2);background:var(--nvs-card-bg);border:1px solid var(--nvs-card-line)}
.nvs-auth-list .nvs-ic{width:16px;height:16px;color:var(--nvs-tone-5)}
.nvs-auth-notes{display:flex;flex-wrap:wrap;gap:0 22px;line-height:var(--nvs-auth-foot-lh)}
.nvs-auth-notes div{display:flex;align-items:center;gap:8px;height:var(--nvs-auth-foot-lh);font-size:14px;color:var(--nvs-mute)}
.nvs-auth-notes .nvs-ic{width:16px;height:16px;color:var(--nvs-tone-5)}
/* form side */
.nvs-auth-main.nvs-canvas{background:var(--nvs-aside)}
/* the form column scrolls on its own when the card is taller than the screen: the card centres in the free space, the copyright follows it in the flow and lands on the same bottom line as the brand notes */
.nvs-auth-main{position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;padding:calc(var(--nvs-auth-bar) + 24px) 32px var(--nvs-auth-edge);scrollbar-width:thin;scrollbar-color:var(--nvs-scroll) transparent}
.nvs-auth-main > :not(.nvs-glow):not(.nvs-orn){position:relative;z-index:1}
.nvs-auth-main .nvs-glow .g1{width:700px;height:700px;right:-300px;top:-320px}
.nvs-auth-main .nvs-glow .g2,.nvs-auth-main .nvs-glow .g3{display:none}
.nvs-auth.no-brand .nvs-auth-main .nvs-glow .g2{display:block}
.nvs-auth-back{position:absolute!important;top:0;left:var(--nvs-gutter);height:var(--nvs-auth-bar);display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--nvs-ink-3)!important;text-decoration:none!important}
.nvs-auth-tools{position:absolute!important;top:0;right:var(--nvs-gutter);height:var(--nvs-auth-bar);display:flex;align-items:center;gap:8px}
.nvs-auth-back:hover{color:var(--nvs-acc)!important}
.nvs-auth-back .nvs-ic{width:18px;height:18px}
.nvs-auth-card{flex:none;width:100%;max-width:var(--nvs-auth-card);margin:auto 0;padding:44px 44px 38px;border-radius:22px;background:var(--nvs-pop-bg);border:1px solid var(--nvs-pop-line);box-shadow:var(--nvs-pop-shadow);animation:nvsRise .6s cubic-bezier(.2,.75,.2,1) backwards}
.nvs-auth-copy{flex:none;width:100%;margin-top:28px;height:var(--nvs-auth-foot-lh);line-height:var(--nvs-auth-foot-lh);text-align:center;font-size:14px;color:var(--nvs-mute-2)}
.nvs-auth-copy a{color:var(--nvs-ink-3)!important;text-decoration:none!important}

/* page content */
.nvs-auth-head{display:grid;gap:8px;margin-bottom:28px}
.nvs-auth-head .nvs-eb{color:var(--nvs-acc)}
.nvs-auth-head h1{font:700 34px/1.2 var(--nvs-font)!important;letter-spacing:-.03em;margin:0!important;color:var(--nvs-ink)!important}
.nvs-auth-head p,.nvs-auth-head div{font-size:16px;line-height:1.55;color:var(--nvs-mute)!important;margin:0}
.nvs-auth-label{display:block;margin:0 0 9px;font-size:14.5px;font-weight:600;color:var(--nvs-ink-2)}
.nvs-auth-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nvs-auth-link{font-size:14.5px;font-weight:600;color:var(--nvs-acc)!important;text-decoration:none!important}
.nvs-auth-link:hover{text-decoration:underline!important}
.nvs-auth-foot{display:flex;justify-content:center;gap:14px;margin-top:24px;font-size:15px;color:var(--nvs-mute)}
.nvs-auth-sep{display:flex;align-items:center;gap:12px;margin:24px 0;font-size:14px;color:var(--nvs-mute)}
.nvs-auth-sep::before,.nvs-auth-sep::after{content:"";flex:1;height:1px;background:var(--nvs-line-soft)}
.nvs-auth .form-control{height:54px;padding:0 17px!important;border-radius:13px!important;font:500 16px var(--nvs-font)!important;color:var(--nvs-ink)!important;background:var(--nvs-field-bg)!important;border:1px solid var(--nvs-field-line)!important;box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
.nvs-auth .form-control::placeholder{color:var(--nvs-mute)}
.nvs-auth .form-control:focus{border-color:var(--nvs-acc-line)!important;box-shadow:0 0 0 3px var(--nvs-acc-soft)!important}
.nvs-auth .nvs-aut-ui-pass-eye{color:var(--nvs-mute)!important}
.nvs-auth .nvs-aut-ui-pass-eye:hover{color:var(--nvs-acc)!important}
.nvs-auth .fv-plugins-message-container,.nvs-auth .invalid-feedback{margin-top:6px;font-size:14px;color:var(--nvs-acc)!important}
.nvs-auth .form-check-input{border:1.5px solid color-mix(in srgb,var(--nvs-ink) 28%,transparent)!important;background-color:var(--nvs-field-bg)!important}
.nvs-auth .form-check-input:checked{background-color:var(--nvs-red)!important;border-color:var(--nvs-red)!important}
.nvs-auth .form-check-label{font-size:15px;color:var(--nvs-ink-2)!important}
.nvs-auth .nvs-auth-submit{width:100%;height:56px;margin-top:10px}

/* short screens: the preview illustration gives way so heading, chips and the security notes still fit the brand column */
@media (max-height:840px){.nvs-auth-stage{display:none}}
@media (max-width:991.98px){
  .nvs-auth{grid-template-columns:minmax(0,1fr)}
  .nvs-auth-brand{display:none}
  .nvs-auth-main .nvs-glow .g2{display:block}
  .nvs-auth-card{padding:28px 22px 24px}
}
/* organisation picker (TenantSelector component) */
.nvs-tenant-user{display:flex;align-items:center;gap:14px;padding-bottom:20px;margin-bottom:8px;border-bottom:1px solid var(--nvs-line-soft)}
.nvs-tenant-user img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--nvs-pop-bg),0 0 0 3px var(--nvs-line)}
.nvs-tenant-user b{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--nvs-ink)}
.nvs-tenant-verified{width:18px;height:18px;flex:none}
.nvs-tenant-verified path{fill:#1d9bf0}
.nvs-tenant-verified .tick{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nvs-tenant-out{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:11px;flex:none;font-size:14px;font-weight:600;color:var(--nvs-danger-ink)!important;background:var(--nvs-danger-bg);border:1px solid var(--nvs-danger-line);text-decoration:none!important;transition:filter .15s}
.nvs-tenant-out:hover{filter:brightness(.97)}
.nvs-tenant-out .nvs-ic{width:17px;height:17px}
.nvs-tenant-list{display:grid;gap:8px;max-height:min(420px,calc(100vh - 380px));overflow:auto;margin:0 -6px;padding:12px 6px 2px;scrollbar-width:thin;scrollbar-color:var(--nvs-scroll) transparent}
.nvs-tenant{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:14px;text-align:left;color:var(--nvs-ink);background:var(--nvs-card-bg);border:1px solid var(--nvs-card-line);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.nvs-tenant:hover{border-color:var(--nvs-acc-line);background:var(--nvs-card-hover);transform:translateY(-1px)}
.nvs-tenant img{width:44px;height:44px;border-radius:12px;object-fit:contain;flex:none;background:var(--nvs-seg-bg)}
.nvs-tenant span{flex:1;min-width:0;display:grid;gap:3px}
.nvs-tenant b{font-size:15.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nvs-tenant small{font-size:13.5px;color:var(--nvs-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nvs-tenant > .nvs-ic{width:20px;height:20px;color:var(--nvs-mute);transition:color .15s,transform .15s}
.nvs-tenant:hover > .nvs-ic{color:var(--nvs-acc);transform:translateX(2px)}
.nvs-tenant-alert{display:grid;gap:6px;margin-top:16px;padding:16px;border-radius:14px;font-size:14px;color:var(--nvs-danger-ink);background:var(--nvs-danger-bg)}
.nvs-tenant-alert b{font-size:15px}