:root {
  --navy: #0a1b2f !important;
  --blue: #c99535 !important;
  --gold: #d9ad55;
  --gold-light: #f4d98d;
  --ink: #152337 !important;
  --muted: #718096 !important;
  --line: #e8dfcf !important;
  --bg: #f7f4ed !important;
  --shadow: 0 12px 32px rgba(10, 27, 47, .09) !important;
}

/* Merge the original navy logo artwork into the surrounding JustRoad surface. */
.login-art .logo,
.login-side .login-brand,
aside .brand::before,
.sidebar .brand::before {
  mix-blend-mode: lighten !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Authentication state must override the mobile login layout. */
.login-screen.hidden,
#login.login.hidden { display: none !important; }

body button.jr-cancel,
body button.jr-delete,
body button.branch-delete,
body button.inv-delete,
body button.danger,
body button[class*="delete"] {
  color: #000 !important;
  font-weight: 700;
}
.login-art .logo,
.login-side .login-brand { background-size: contain !important; }
.mobile-logo {
  background-color: #10263f !important;
  background-blend-mode: lighten !important;
  border: 1px solid rgba(217,173,85,.22) !important;
}

body {
  background:
    radial-gradient(circle at 90% 0, rgba(217, 173, 85, .12), transparent 30rem),
    var(--bg) !important;
}

body:has(#login:not(.hidden)),
body:has(#loginScreen:not(.hidden)) {
  overflow: hidden !important;
}

/* A single, joined sign-in surface shared by every JustRoad portal. */
.login-screen,
#login.login {
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;
  padding: clamp(18px, 3vw, 42px) !important;
  gap: 0 !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(217, 173, 85, .18), transparent 24rem),
    linear-gradient(145deg, #071525 0%, #10263f 58%, #071525 100%) !important;
  box-sizing: border-box;
}

.login-screen .login-side,
.login-screen .login-panel,
#login.login .login-art,
#login.login .login-panel,
#login.login .login-form-wrap {
  min-height: calc(100vh - clamp(36px, 6vw, 84px)) !important;
  margin: 0 !important;
}

.login-screen .login-side,
#login.login .login-art {
  padding: clamp(38px, 6vw, 88px) !important;
  border-radius: 0 30px 30px 0 !important;
  border: 0 !important;
  box-shadow: 24px 24px 70px rgba(0, 0, 0, .22);
  justify-content: space-between !important;
}

.login-screen .login-panel,
#login.login .login-panel,
#login.login .login-form-wrap {
  position: relative;
  z-index: 3;
  padding: clamp(34px, 6vw, 78px) !important;
  border-radius: 30px 0 0 30px !important;
  border-start-start-radius: 72px !important;
  border-end-start-radius: 72px !important;
  border-start-end-radius: 30px !important;
  border-end-end-radius: 30px !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(217, 173, 85, .1), transparent 19rem),
    #fffdf9 !important;
  box-shadow: -24px 24px 70px rgba(0, 0, 0, .18);
}

.login-screen .login-panel::before,
#login.login .login-panel::before,
#login.login .login-form-wrap::before {
  content: "";
  position: absolute;
  inset-inline-end: -1px;
  top: 11%;
  width: 1px;
  height: 78%;
  background: linear-gradient(transparent, rgba(217, 173, 85, .65), transparent);
}

.login-screen .login-card,
#login.login form {
  width: min(100%, 480px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.login-screen .login-copy,
#login.login .login-art > div:last-child {
  position: relative;
  z-index: 2;
  max-width: 690px;
}

.login-screen .login-copy h2,
#login.login .login-art h1 {
  max-width: 650px;
  line-height: 1.28 !important;
}

.login-screen .login-card input,
#login.login form input {
  min-height: 52px;
  border-radius: 12px !important;
  background: #fff !important;
}

.login-screen .login-submit,
.login-screen .login-btn,
#login.login .login-btn,
#login.login .submit {
  min-height: 52px;
  border-radius: 12px !important;
}

aside,
.sidebar,
.login-art,
.login-side {
  background: linear-gradient(165deg, #10263f 0%, #071525 72%, #0b1c31 100%) !important;
}

.login-art,
.login-side {
  position: relative;
  overflow: hidden;
}

.login-art::after,
.login-side::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  inset-inline-end: -190px;
  bottom: -210px;
  border: 1px solid rgba(217, 173, 85, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(217, 173, 85, .035), 0 0 0 110px rgba(217, 173, 85, .025);
  pointer-events: none;
}

.login-art .logo,
.login-side .login-brand {
  width: 255px;
  height: 142px;
  background: url("justroad-logo.png") center / contain no-repeat;
  border-radius: 0;
  box-shadow: none;
}

.login-art .logo > *,
.login-side .login-brand > * {
  display: none !important;
}

.mobile-logo {
  width: 165px;
  height: 94px;
  background: url("justroad-logo.png") center / contain no-repeat;
  border-radius: 15px;
}

.mobile-logo > * {
  display: none !important;
}

aside .brand,
.sidebar .brand {
  position: relative;
  min-height: 70px;
  padding-inline-start: 74px !important;
}

aside .brand::before,
.sidebar .brand::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: -6px;
  width: 62px;
  height: 62px;
  background: url("justroad-logo.png") center / cover no-repeat;
  border: 1px solid rgba(217, 173, 85, .35);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

aside .brand > b,
aside .brand > .brand-mark,
.sidebar .brand > .brand-mark {
  display: none !important;
}

aside .brand strong,
.sidebar .brand strong {
  color: var(--gold-light) !important;
  letter-spacing: .4px;
}

.nav:hover,
.nav.active,
.nav-item:hover,
.nav-item.active {
  color: #102033 !important;
  background: linear-gradient(135deg, #f1d184, #c28c2d) !important;
  box-shadow: 0 7px 18px rgba(196, 143, 45, .22);
}

.nav,
.nav-item {
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.nav:hover,
.nav-item:hover {
  transform: translateY(-1px);
}

header,
.topbar {
  background: rgba(255, 255, 255, .94) !important;
  border-color: var(--line) !important;
  box-shadow: 0 4px 18px rgba(10, 27, 47, .045);
  backdrop-filter: blur(10px);
}

.card,
.stat,
.login-card {
  border-color: rgba(201, 149, 53, .2) !important;
  box-shadow: var(--shadow) !important;
}

.card,
.stat {
  background: linear-gradient(160deg, #fff 0%, #fffdf8 100%) !important;
}

.hero h2,
.page-title h1,
.heading h1,
.card-head h3 {
  color: var(--navy) !important;
}

.primary,
.btn.primary,
.login-submit,
.submit,
.login-btn {
  background: linear-gradient(135deg, #e0b75f, #b98126) !important;
  color: #102033 !important;
  border-color: transparent !important;
  box-shadow: 0 7px 16px rgba(185, 129, 38, .2);
  font-weight: 800 !important;
}

.secondary,
.btn:not(.primary),
.lang,
.lang-btn {
  border-color: #ddc99f !important;
  color: #8b641f !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #c99535 !important;
  box-shadow: 0 0 0 3px rgba(201, 149, 53, .13) !important;
  outline: none !important;
}

th {
  color: #705426 !important;
  background: #fbf5e8 !important;
  border-bottom: 1px solid #eadbbd !important;
}

tbody tr {
  transition: background .18s ease;
}

tbody tr:hover {
  background: rgba(244, 217, 141, .11);
}

.avatar {
  color: #76531c !important;
  background: #f7e7bd !important;
  border: 1px solid #e7ca87;
}

.pill:not(.red):not(.wait):not(.orange) {
  color: #76531c !important;
  background: #fbefcf !important;
}

#toast,
.toast {
  background: linear-gradient(135deg, #10263f, #071525) !important;
  border: 1px solid rgba(217, 173, 85, .35);
  box-shadow: 0 12px 30px rgba(4, 15, 27, .25);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f4efe5; }
::-webkit-scrollbar-thumb { background: #d3b577; border-radius: 20px; border: 2px solid #f4efe5; }

@media (max-width: 720px) {
  .login-screen,
  #login.login {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
  .login-screen .login-side,
  #login.login .login-art { display: none !important; }
  .login-screen .login-panel,
  #login.login .login-panel,
  #login.login .login-form-wrap {
    min-height: calc(100vh - 32px) !important;
    height: calc(100vh - 32px) !important;
    border: 1px solid rgba(217, 173, 85, .24) !important;
    border-radius: 24px !important;
    border-start-start-radius: 24px !important;
    border-end-start-radius: 24px !important;
    border-start-end-radius: 24px !important;
    border-end-end-radius: 24px !important;
    padding: 30px 22px !important;
  }
  .login-screen .login-panel::before,
  #login.login .login-panel::before,
  #login.login .login-form-wrap::before { display: none; }
  .login-screen .login-card,
  #login.login form { margin: auto !important; }
  .mobile-logo { display: block !important; }
  aside .brand,
  .sidebar .brand { padding-inline-start: 70px !important; }
}

/* Feather every edge of the opaque source artwork so no image rectangle remains. */
.login-art .logo,
.login-side .login-brand {
  -webkit-mask-image: radial-gradient(ellipse 72% 66% at center, #000 48%, rgba(0,0,0,.92) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 66% at center, #000 48%, rgba(0,0,0,.92) 66%, transparent 100%);
}
aside .brand::before,
.sidebar .brand::before {
  border-radius: 50% !important;
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 100%);
  mask-image: radial-gradient(circle, #000 52%, transparent 100%);
}