:root {
  --portal-navy: #071321;
  --portal-blue: #2d8ee8;
  --portal-line: rgba(111, 151, 188, .32);
  --portal-surface: rgba(248, 251, 254, .94);
}

html {
  min-height: 100%;
}

body.portal-auth {
  background-color: var(--portal-navy);
  background-image:
    linear-gradient(112deg, rgba(3, 12, 22, .62) 0%, rgba(5, 16, 28, .52) 48%, rgba(4, 13, 23, .42) 100%),
    url("portal-background.jpg");
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
}

body.portal-auth::before {
  background-image:
    radial-gradient(circle at 82% 18%, rgba(77, 157, 230, .13), transparent 29%),
    linear-gradient(to bottom, rgba(2, 9, 16, .04), rgba(2, 9, 16, .3));
  background-size: auto;
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

body.portal-auth > nav.navbar,
body.portal-auth > main.bd-content {
  position: relative;
}

body.portal-auth > nav.navbar {
  z-index: 1030;
}

body.portal-auth > main.bd-content {
  z-index: 1;
}

body.portal-auth > nav.navbar {
  background: rgba(7, 19, 33, .94) !important;
  border-bottom: 1px solid var(--portal-line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  min-height: 66px;
  padding: 11px 22px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body.portal-auth > nav .navbar-brand {
  align-items: center;
  color: #f3f8fd !important;
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  gap: 11px;
}

body.portal-auth > nav .navbar-brand::before {
  align-items: center;
  background: linear-gradient(145deg, #79bdff, var(--portal-blue));
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(45, 142, 232, .3);
  color: #061321;
  content: "ACP";
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  height: 36px;
  justify-content: center;
  letter-spacing: .04em;
  transform: none;
  width: 40px;
}

body.portal-auth > nav .nav-link {
  border: 1px solid transparent;
  border-radius: 999px;
  color: #b9c8d7 !important;
  font-size: 13px;
  margin: 0 2px;
  padding: 8px 10px !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.portal-auth > nav .nav-link:hover,
body.portal-auth > nav .nav-link:focus,
body.portal-auth > nav .nav-link.active {
  background: rgba(45, 142, 232, .13);
  border-color: rgba(112, 183, 255, .25);
  color: #eff7ff !important;
}

body.portal-auth > nav .dropdown-menu {
  background: rgba(12, 29, 47, .98);
  border: 1px solid rgba(113, 159, 201, .36);
  border-radius: 13px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
  margin-top: 9px;
  min-width: 230px;
  padding: 7px;
}

body.portal-auth > nav .dropdown-item {
  border-radius: 8px;
  color: #d6e1ec;
  font-size: 13px;
  padding: 10px 12px;
}

body.portal-auth > nav .dropdown-item:hover,
body.portal-auth > nav .dropdown-item:focus,
body.portal-auth > nav .dropdown-item.active {
  background: rgba(45, 142, 232, .18);
  color: #fff;
}

body.portal-auth > nav .btn-outline-light {
  border-color: rgba(194, 216, 236, .55);
  border-radius: 999px;
  color: #edf6ff;
  padding: 7px 15px;
}

body.portal-auth > nav .btn-outline-light:hover,
body.portal-auth > nav .btn-outline-light:focus {
  background: #edf6ff;
  border-color: #edf6ff;
  color: #0b1b2c;
}

body.portal-auth > main.bd-content {
  min-height: calc(100vh - 66px);
  padding: 1px 0 44px;
}

body.portal-auth .bd-content > .container {
  background: var(--portal-surface);
  border: 1px solid rgba(151, 178, 201, .42);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  color: #17283a;
  margin-bottom: 28px;
  margin-top: 28px;
  overflow: visible;
  padding: 26px 28px 32px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.portal-auth .bd-content > .container .page-header {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dce5ed;
  border-radius: 0;
  margin-bottom: 22px;
  padding: 0 0 18px;
}

body.portal-auth .bd-content > .container .page-header h1 {
  color: #17283a;
  font-size: clamp(26px, 4vw, 36px);
  margin: 0;
}

body.portal-auth .od-shell,
body.portal-auth .supplier-tool,
body.portal-auth .notice-shell,
body.portal-auth .cw-shell {
  position: relative;
  z-index: 1;
}

body.portal-auth .od-shell {
  background: rgba(240, 245, 250, .91);
  border: 1px solid rgba(151, 178, 201, .3);
  border-radius: 24px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .24);
  margin-bottom: 26px;
  margin-top: 26px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.portal-auth .supplier-tool,
body.portal-auth .notice-shell {
  background: rgba(237, 243, 248, .87);
  border: 1px solid rgba(151, 178, 201, .26);
  border-radius: 25px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .22);
  margin-top: 28px;
  padding-top: 20px;
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
}

body.portal-auth .pu-page {
  background: rgba(242, 246, 244, .9);
  border-bottom: 1px solid rgba(151, 178, 201, .3);
  border-top: 1px solid rgba(151, 178, 201, .3);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
}

body.portal-auth .invoice-page {
  background: rgba(17, 27, 38, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (max-width: 991px) {
  body.portal-auth {
    background-position: center, center;
  }

  body.portal-auth > nav .navbar-collapse {
    background: rgba(7, 19, 33, .98);
    border: 1px solid rgba(113, 159, 201, .24);
    border-radius: 14px;
    margin-top: 10px;
    padding: 10px;
  }

  body.portal-auth > nav .nav-link {
    border-radius: 9px;
    margin: 2px 0;
  }
}

@media (max-width: 700px) {
  body.portal-auth {
    background-image:
      linear-gradient(rgba(3, 12, 22, .68), rgba(4, 15, 26, .76)),
      url("portal-background.jpg");
    background-position: center, center;
  }

  body.portal-auth > nav.navbar {
    padding: 10px 14px;
  }

  body.portal-auth .bd-content > .container {
    border-radius: 16px;
    margin: 16px 10px 24px;
    padding: 20px 16px 24px;
    width: auto;
  }

  body.portal-auth .od-shell,
  body.portal-auth .supplier-tool,
  body.portal-auth .notice-shell {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.portal-auth {
    background-attachment: scroll;
  }
}