/* ============================================================
   D&A NEXUS — REFERENCE PORTAL UI
   Compact / premium / theme-aware
   ============================================================ */

:root {
  --ref-portal-accent: #b25f78;
  --ref-portal-accent-text: #ffffff;
  --ref-portal-surface: #f4eee9;

  --ref-bg:
    color-mix(
      in srgb,
      var(--ref-portal-surface) 86%,
      #ffffff 14%
    );

  --ref-card:
    color-mix(
      in srgb,
      var(--ref-portal-surface) 35%,
      #ffffff 65%
    );

  --ref-border:
    rgba(255,255,255,.68);

  --ref-text:
    #282a36;

  --ref-muted:
    rgba(40,42,54,.57);
}


/* ------------------------------------------------------------
   PERFORMANCE CLIENT
   ------------------------------------------------------------ */

.portal-deliverable-comments-row {
  display: none !important;
}

body.nexus-client-performance #nexus-cursor-light,
body.nexus-client-session #nexus-cursor-light {
  display: none !important;
}

body.nexus-client-performance .spotlight-card::before,
body.nexus-client-performance .spotlight-card::after,
body.nexus-client-session .spotlight-card::before,
body.nexus-client-session .spotlight-card::after {
  display: none !important;
  content: none !important;
}


/* ============================================================
   TOPBAR
   ============================================================ */

#nexus-reference-portal-topbar {
  width: calc(100% - 44px);
  max-width: 1500px;

  min-height: 66px;

  margin:
    18px auto
    16px;

  padding:
    10px 18px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 22px;

  border:
    1px solid
    rgba(255,255,255,.72);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.76);

  box-shadow:
    0 10px 32px
    rgba(30,20,30,.055);

  backdrop-filter:
    blur(16px);

  position: relative;
  z-index: 15;
}


.nexus-reference-brand {
  min-width: 220px;

  display: flex;

  align-items: center;

  gap: 11px;
}


.nexus-reference-brand-mark {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--ref-portal-accent) 55%,
      transparent
    );

  position: relative;
}


.nexus-reference-brand-mark::before,
.nexus-reference-brand-mark::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;
}


.nexus-reference-brand-mark::before {
  width: 18px;
  height: 18px;

  border:
    1px solid
    var(--ref-portal-accent);
}


.nexus-reference-brand-mark::after {
  width: 5px;
  height: 5px;

  background:
    var(--ref-portal-accent);
}


.nexus-reference-brand strong {
  display: block;

  max-width: 240px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 14px;

  font-weight: 800;

  color: var(--ref-text);
}


.nexus-reference-brand small {
  display: block;

  margin-top: 2px;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .16em;

  color: var(--ref-muted);
}


.nexus-reference-nav {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  flex-wrap: wrap;
}


.nexus-reference-nav button {
  min-height: 40px;

  padding:
    0 14px;

  border: 0;

  border-radius:
    11px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  background:
    transparent;

  color:
    var(--ref-text);

  font-size:
    11px;

  font-weight:
    650;

  cursor:
    pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}


.nexus-reference-nav button:hover {
  background:
    rgba(0,0,0,.035);
}


.nexus-reference-nav button.active {
  background:
    color-mix(
      in srgb,
      var(--ref-portal-accent) 14%,
      white 86%
    );

  color:
    color-mix(
      in srgb,
      var(--ref-portal-accent) 80%,
      #222 20%
    );
}


.nexus-reference-nav svg {
  width: 15px;
  height: 15px;
}


/* ============================================================
   FINAL DELIVERY
   ============================================================ */

.nexus-reference-final-shell {
  width:
    calc(100% - 44px) !important;

  max-width:
    1500px !important;

  min-height:
    420px !important;

  margin:
    0 auto !important;

  padding:
    38px 40px !important;

  border:
    1px solid
    rgba(255,255,255,.72) !important;

  border-radius:
    24px !important;

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--ref-portal-surface) 92%,
        white 8%
      ),
      color-mix(
        in srgb,
        var(--ref-portal-surface) 74%,
        white 26%
      )
    ) !important;

  box-shadow:
    0 18px 54px
    rgba(35,25,30,.05) !important;
}


/* ============================================================
   FILES
   ============================================================ */

#portal-final-files {
  width: 100% !important;

  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(118px, 1fr)) !important;

  gap:
    12px !important;

  margin:
    0 !important;

  align-items:
    stretch !important;
}


#portal-final-files .portal-final-file {
  min-width:
    0 !important;

  min-height:
    108px !important;

  max-height:
    118px !important;

  padding:
    15px 12px !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    center !important;

  align-items:
    center !important;

  gap:
    8px !important;

  border:
    1px solid
    var(--ref-border) !important;

  border-radius:
    15px !important;

  background:
    rgba(255,255,255,.58) !important;

  box-shadow:
    0 8px 22px
    rgba(30,25,30,.025) !important;

  text-align:
    center !important;

  cursor:
    pointer !important;

  transition:
    transform .14s ease,
    background .14s ease !important;
}


#portal-final-files .portal-final-file:hover {
  transform:
    translateY(-2px) !important;

  background:
    rgba(255,255,255,.78) !important;
}


#portal-final-files .portal-final-file svg {
  width:
    21px !important;

  height:
    21px !important;
}


#portal-final-files .portal-final-file span {
  font-size:
    11px !important;

  line-height:
    1.25 !important;

  font-weight:
    750 !important;

  color:
    var(--ref-text) !important;
}


/* ============================================================
   ACTIONS
   ============================================================ */

#nexus-reference-action-wrap {
  display: flex;

  flex-direction: column;

  gap: 10px;

  width: 100%;
}


#portal-download-zip,
#portal-global-comment {
  width:
    100% !important;

  min-height:
    48px !important;

  padding:
    0 20px !important;

  border-radius:
    13px !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  justify-content:
    center !important;
}


#portal-download-zip {
  background:
    var(--ref-portal-accent) !important;

  color:
    var(--ref-portal-accent-text) !important;

  box-shadow:
    0 10px 24px
    color-mix(
      in srgb,
      var(--ref-portal-accent) 22%,
      transparent
    ) !important;
}


#portal-global-comment {
  background:
    rgba(255,255,255,.78) !important;

  color:
    var(--ref-text) !important;

  border:
    1px solid
    rgba(40,40,50,.07) !important;
}


.nexus-reference-action-note {
  display:
    block;

  padding:
    2px 10px 0;

  font-size:
    9px;

  line-height:
    1.45;

  text-align:
    center;

  color:
    var(--ref-muted);
}


/* ============================================================
   COMMENTS
   ============================================================ */

#portal-global-comments-list {
  width:
    calc(100% - 74px) !important;

  max-width:
    1440px !important;

  margin:
    -150px auto 28px !important;

  position:
    relative !important;

  z-index:
    4 !important;
}


#portal-global-comments-list .portal-global-comments {
  width:
    100% !important;

  padding:
    18px !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0,1fr)) !important;

  gap:
    10px !important;

  border:
    1px solid
    rgba(255,255,255,.72) !important;

  border-radius:
    19px !important;

  background:
    rgba(255,255,255,.64) !important;

  box-shadow:
    0 12px 36px
    rgba(30,25,30,.035) !important;
}


#portal-global-comments-list
.portal-global-comments-title {
  grid-column:
    1 / -1 !important;

  min-height:
    40px;

  margin:
    0 !important;

  padding:
    0 4px 10px !important;

  display:
    flex !important;

  align-items:
    center !important;

  border-bottom:
    1px solid
    rgba(40,40,50,.07) !important;
}


#portal-global-comments-list
.portal-global-comments-title strong {
  font-size:
    14px !important;

  font-weight:
    800 !important;

  color:
    var(--ref-text) !important;
}


#portal-global-comments-list
.portal-global-comments-title
strong::before {
  content:
    "✦";

  margin-right:
    8px;

  color:
    var(--ref-portal-accent);
}


#portal-global-comments-list
.portal-global-comment {
  min-height:
    82px !important;

  padding:
    13px 14px !important;

  border:
    1px solid
    rgba(255,255,255,.8) !important;

  border-radius:
    13px !important;

  background:
    rgba(255,255,255,.76) !important;

  box-shadow:
    none !important;
}


#portal-global-comments-list
.portal-global-comment::before {
  width:
    2px !important;

  height:
    22px !important;

  top:
    15px !important;

  background:
    var(--ref-portal-accent) !important;
}


#portal-global-comments-list
.portal-global-comment-head {
  margin-bottom:
    8px !important;
}


#portal-global-comments-list
.portal-global-comment-head strong {
  font-size:
    11px !important;
}


#portal-global-comments-list
.portal-global-comment-head span {
  font-size:
    8.5px !important;

  color:
    var(--ref-muted) !important;
}


#portal-global-comments-list
.portal-global-comment p {
  font-size:
    10.5px !important;

  line-height:
    1.45 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

  #nexus-reference-portal-topbar {
    width:
      calc(100% - 24px);
  }

  .nexus-reference-brand {
    min-width:
      160px;
  }

  .nexus-reference-nav button span {
    display:
      none;
  }

  .nexus-reference-nav button {
    width:
      40px;

    padding:
      0;

    justify-content:
      center;
  }

  .nexus-reference-final-shell {
    width:
      calc(100% - 24px) !important;

    padding:
      26px !important;
  }

  #portal-final-files {
    grid-template-columns:
      repeat(2,minmax(110px,1fr)) !important;
  }

  #portal-global-comments-list {
    width:
      calc(100% - 44px) !important;

    margin-top:
      -100px !important;
  }

}


@media (max-width: 720px) {

  #nexus-reference-portal-topbar {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      8px;

    padding:
      12px;
  }

  .nexus-reference-brand {
    min-width:
      0;
  }

  .nexus-reference-nav {
    justify-content:
      space-between;
  }

  .nexus-reference-nav button {
    width:
      auto;

    flex:
      1;
  }

  .nexus-reference-nav button span {
    display:
      block;

    font-size:
      9px;
  }

  .nexus-reference-final-shell {
    min-height:
      0 !important;

    padding:
      20px 16px 150px !important;
  }

  #portal-final-files {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  #portal-final-files .portal-final-file {
    min-height:
      90px !important;
  }

  #portal-global-comments-list {
    width:
      calc(100% - 32px) !important;

    margin:
      -120px auto 20px !important;
  }

  #portal-global-comments-list
  .portal-global-comments {
    grid-template-columns:
      1fr !important;

    padding:
      12px !important;
  }

}