/* ==========================================================
   DJR OWNER PORTAL — STAFF & PERSONNEL UI
   ========================================================== */

:root {
  --djr-staff-navy: #0d1c34;
  --djr-staff-navy-2: #142742;
  --djr-staff-purple: #6956e8;
  --djr-staff-purple-soft: #ece9ff;
  --djr-staff-blue: #2489ec;
  --djr-staff-blue-soft: #e9f5ff;
  --djr-staff-cyan: #3cb8e8;
  --djr-staff-text: #172033;
  --djr-staff-muted: #708096;
  --djr-staff-border: var(--owner-line, #dce4ef);
  --djr-staff-surface: #ffffff;
  --djr-staff-page: #f2f5f9;
  --djr-staff-green: #1a9b6b;
  --djr-staff-green-soft: #e9f8f2;
  --djr-staff-amber: #d88916;
  --djr-staff-amber-soft: #fff5df;
  --djr-staff-red: #d94d59;
  --djr-staff-red-soft: #fff0f2;
}

.djr-staff-page {
  display: grid;
  gap: 18px;
}

.djr-staff-hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(72, 184, 255, .30),
      transparent 36%
    ),
    radial-gradient(
      circle at 65% 120%,
      rgba(118, 82, 235, .35),
      transparent 46%
    ),
    linear-gradient(
      135deg,
      #0d1c34 0%,
      #172b4a 55%,
      #26235e 100%
    );
  box-shadow:
    0 18px 40px rgba(13, 28, 52, .16);
}

.djr-staff-hero::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -85px;
  top: -95px;
  border-radius: 50%;
  border: 35px solid rgba(255,255,255,.055);
  pointer-events: none;
}

.djr-staff-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.djr-staff-hero .eyebrow {
  color: #aebfff;
  margin-bottom: 6px;
}

.djr-staff-hero h1 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 2.65rem);
  letter-spacing: -.035em;
}

.djr-staff-hero__lede {
  max-width: 630px;
  margin: 8px 0 0;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
}

.djr-staff-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.djr-staff-action {
  min-height: 42px;
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: .9rem;
  transition:
    transform .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.djr-staff-action:hover {
  transform: translateY(-1px);
}

.djr-staff-action--primary {
  color: #fff !important;
  background: linear-gradient(135deg, #329fe9, #2681e3);
  box-shadow: 0 8px 20px rgba(36, 137, 236, .24);
}

.djr-staff-action--purple {
  color: #fff !important;
  background: linear-gradient(135deg, #735de9, #5b49d1);
}

.djr-staff-action--ghost {
  color: #eff5ff !important;
  background: rgba(255,255,255,.105);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}

.djr-staff-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.djr-staff-stat {
  position: relative;
  overflow: hidden;
  padding: 18px 19px;
  border-radius: 18px;
  border: 1px solid var(--djr-staff-border);
  background: var(--owner-surface, var(--djr-staff-surface));
  box-shadow: 0 8px 24px rgba(20, 42, 73, .055);
}

.djr-staff-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--djr-staff-blue);
}

.djr-staff-stat--purple::before {
  background: var(--djr-staff-purple);
}

.djr-staff-stat--cyan::before {
  background: var(--djr-staff-cyan);
}

.djr-staff-stat__label {
  display: block;
  font-size: .79rem;
  font-weight: 700;
  color: var(--owner-muted, var(--djr-staff-muted));
  text-transform: uppercase;
  letter-spacing: .06em;
}

.djr-staff-stat__value {
  display: block;
  margin-top: 3px;
  font-size: 2rem;
  font-weight: 850;
  line-height: 1;
  color: var(--owner-ink, var(--djr-staff-text));
}

.djr-staff-stat__link {
  display: inline-block;
  margin-top: 9px;
  color: var(--owner-accent, var(--djr-staff-blue));
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.djr-personnel-panel {
  border-radius: 22px;
  border: 1px solid var(--djr-staff-border);
  background: #fff;
  box-shadow: 0 10px 30px rgba(20,42,73,.06);
  overflow: hidden;
}

.djr-personnel-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 21px;
  border-bottom: 1px solid #e7ecf3;
}

.djr-personnel-panel__head h2 {
  margin: 0;
  color: var(--owner-ink, var(--djr-staff-text));
  letter-spacing: -.025em;
}

.djr-personnel-panel__head p {
  margin: 5px 0 0;
  color: var(--owner-muted, var(--djr-staff-muted));
}

.djr-personnel-grid {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.djr-person-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid #e2e8f1;
  border-radius: 17px;
  background:
    linear-gradient(180deg, #fff, #fbfcfe);
  text-decoration: none !important;
  color: inherit !important;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.djr-person-card:hover {
  border-color: #c8d8ee;
  box-shadow: 0 9px 24px rgba(29, 62, 105, .08);
  transform: translateY(-1px);
}

.djr-avatar {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  font-size: 1.23rem;
  font-weight: 850;
  color: #fff;
  letter-spacing: -.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.djr-avatar--violet {
  background: linear-gradient(135deg, #7556eb, #523dc8);
}

.djr-avatar--blue {
  background: linear-gradient(135deg, #319eea, #2674d4);
}

.djr-avatar--cyan {
  background: linear-gradient(135deg, #3fbfd9, #168aae);
}

.djr-avatar--indigo {
  background: linear-gradient(135deg, #536ee5, #394eb8);
}

.djr-avatar--rose {
  background: linear-gradient(135deg, #dd668f, #b5416d);
}

.djr-avatar--emerald {
  background: linear-gradient(135deg, #35b88b, #208a69);
}

.djr-person-card__main {
  min-width: 0;
}

.djr-person-card__name {
  display: block;
  color: var(--owner-ink, var(--djr-staff-text));
  font-size: 1rem;
  font-weight: 850;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.djr-person-card__role {
  display: block;
  margin-top: 2px;
  color: #586a82;
  font-size: .89rem;
}

.djr-person-card__meta {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 7px;
}

.djr-pill {
  min-height: 25px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.djr-pill--department {
  color: #4f45b3;
  background: var(--owner-inset, var(--djr-staff-purple-soft));
}

.djr-pill--active {
  color: #147250;
  background: var(--owner-inset, var(--djr-staff-green-soft));
}

.djr-pill--inactive {
  color: #9d3b45;
  background: var(--owner-inset, var(--djr-staff-red-soft));
}

.djr-pill--complete {
  color: #147250;
  background: var(--owner-inset, var(--djr-staff-green-soft));
}

.djr-pill--required {
  color: #965e0a;
  background: var(--owner-inset, var(--djr-staff-amber-soft));
}

.djr-pill--owner {
  color: #334ca6;
  background: #ecf0ff;
}

.djr-person-card__email {
  display: block;
  margin-top: 7px;
  color: var(--owner-muted, var(--djr-staff-muted));
  font-size: .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.djr-person-card__arrow {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--owner-inset, var(--djr-staff-blue-soft));
  color: var(--owner-accent, var(--djr-staff-blue));
  font-size: 1.15rem;
  font-weight: 900;
}

.djr-profile-hero {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(
      circle at 90% 0,
      rgba(70, 175, 255, .28),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #0e1e36,
      #192e4e 58%,
      #33286d
    );
}

.djr-profile-hero__row {
  display: flex;
  gap: 17px;
  align-items: center;
}

.djr-profile-hero .djr-avatar {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  font-size: 1.55rem;
  border: 2px solid rgba(255,255,255,.16);
}

.djr-profile-hero__identity {
  min-width: 0;
  flex: 1;
}

.djr-profile-hero__identity h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 5vw, 2.2rem);
}

.djr-profile-hero__identity p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.72);
}

.djr-profile-hero__actions {
  margin-top: 17px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.djr-profile-status {
  padding: 13px 15px;
  border-radius: 14px;
  font-size: .87rem;
  line-height: 1.45;
  font-weight: 650;
}

.djr-profile-status--ok {
  color: #146c4c;
  background: #eaf8f2;
  border: 1px solid #ccecdf;
}

.djr-profile-status--warn {
  color: #83570d;
  background: #fff7e7;
  border: 1px solid #f1dfb9;
}

.djr-profile-status--owner {
  color: #4654a5;
  background: #eff1ff;
  border: 1px solid #dfe3ff;
}

.djr-profile-form-card {
  padding: 21px;
  border: 1px solid var(--djr-staff-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20,42,73,.055);
}

.djr-profile-section-title {
  margin: 4px 0 17px;
}

.djr-profile-section-title span {
  display: block;
  color: var(--owner-accent, var(--djr-staff-purple));
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.djr-profile-section-title h2 {
  margin: 3px 0 0;
  color: var(--owner-ink, var(--djr-staff-text));
  font-size: 1.18rem;
}

.djr-profile-form-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 15px 17px;
}

.djr-profile-field {
  min-width: 0;
}

.djr-profile-field label {
  display: block;
  margin-bottom: 6px;
  color: #3a4b62;
  font-size: .8rem;
  font-weight: 750;
}

.djr-profile-field input:not([type="checkbox"]),
.djr-profile-field select,
.djr-profile-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 45px;
  padding: 10px 12px;
  border: 1px solid #cfd9e7;
  border-radius: 11px;
  background: #f9fbfd;
  color: #172033;
  font: inherit;
  outline: none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.djr-profile-field input:focus,
.djr-profile-field select:focus,
.djr-profile-field textarea:focus {
  border-color: #619ee5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(36,137,236,.11);
}

.djr-profile-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--djr-staff-purple);
}

.djr-profile-field small {
  display: block;
  margin-top: 5px;
  color: var(--owner-muted, var(--djr-staff-muted));
  font-size: .75rem;
}

.djr-profile-field__error {
  color: #b42318 !important;
}

.djr-profile-footer {
  margin-top: 21px;
  padding-top: 18px;
  border-top: 1px solid #e8edf4;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.djr-save-button {
  min-height: 43px;
  padding: 10px 17px;
  border: 0;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #2f9be8, #267dd8);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 19px rgba(36,137,236,.2);
}

.djr-secondary-button {
  min-height: 43px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #5145b6 !important;
  background: #efedff;
  text-decoration: none !important;
  font-weight: 750;
}

@media (max-width: 700px) {
  .djr-staff-hero {
    padding: 20px 17px;
    border-radius: 20px;
  }

  .djr-staff-hero__inner {
    align-items: flex-start;
  }

  .djr-staff-actions {
    width: 100%;
  }

  .djr-staff-action {
    flex: 1 1 auto;
  }

  .djr-staff-stats {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .djr-staff-stat {
    padding: 15px 17px;
  }

  .djr-staff-stat__value {
    font-size: 1.7rem;
  }

  .djr-personnel-panel__head {
    padding: 18px;
  }

  .djr-personnel-grid {
    padding: 10px;
  }

  .djr-person-card {
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 11px;
    padding: 13px;
  }

  .djr-avatar {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .djr-person-card__arrow {
    width: 30px;
    height: 30px;
  }

  .djr-profile-hero {
    padding: 18px;
  }

  .djr-profile-hero__row {
    align-items: flex-start;
  }

  .djr-profile-hero .djr-avatar {
    width: 59px;
    height: 59px;
  }

  .djr-profile-form-card {
    padding: 17px;
  }

  .djr-profile-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .djr-person-card {
    grid-template-columns: auto minmax(0,1fr);
  }

  .djr-person-card__arrow {
    display: none;
  }

  .djr-person-card__meta {
    gap: 5px;
  }

  .djr-staff-action {
    width: 100%;
  }
}


/* ==========================================================
   DJR STAFF EXPERIENCE V2
   Permanent personnel identity
   ========================================================== */

.djr-member-profile-page {
  width: min(100%, 980px);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  padding: 12px 0 54px;
}


/* ---------- Identity hero ---------- */

.djr-member-profile-hero,
.djr-staff-portal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(67, 182, 255, .28),
      transparent 34%
    ),
    radial-gradient(
      circle at 65% 125%,
      rgba(128, 87, 255, .30),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      #0a1830 0%,
      #122a4c 54%,
      #29235f 100%
    );
  box-shadow:
    0 22px 55px rgba(13, 28, 52, .17);
}

.djr-member-profile-hero {
  padding: clamp(22px, 5vw, 34px);
}

.djr-member-profile-hero__glow,
.djr-staff-portal-hero__glow {
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  right: -105px;
  top: -135px;
  border-radius: 50%;
  border: 46px solid rgba(255,255,255,.045);
  pointer-events: none;
}

.djr-member-profile-hero__top {
  display: flex;
  align-items: center;
  gap: 22px;
}

.djr-member-profile-avatar-wrap {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 9px;
}

.djr-member-profile-avatar {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 25px;
  border: 2px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 1.95rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.045em;
  box-shadow:
    0 14px 30px rgba(0,0,0,.17),
    inset 0 1px rgba(255,255,255,.18);
}

.djr-member-profile-avatar--violet {
  background:
    linear-gradient(
      145deg,
      #8270f3,
      #6045d4
    );
}

.djr-member-profile-avatar--blue {
  background:
    linear-gradient(
      145deg,
      #57b9f4,
      #2679dc
    );
}

.djr-member-profile-avatar-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.09);
  font-size: .66rem;
  font-weight: 700;
}

.djr-member-profile-avatar-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5de1a9;
  box-shadow:
    0 0 0 3px rgba(93,225,169,.12);
}

.djr-member-profile-hero__identity {
  min-width: 0;
  flex: 1;
}

.djr-member-profile-kicker {
  display: block;
  margin-bottom: 5px;
  color: #8ecfff;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.djr-member-profile-hero h1,
.djr-staff-portal-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.04em;
}

.djr-member-profile-role,
.djr-staff-portal-role {
  margin: 7px 0 0;
  color: rgba(255,255,255,.82);
  font-size: .91rem;
  font-weight: 650;
}

.djr-member-profile-role span,
.djr-staff-portal-role span {
  padding: 0 4px;
  opacity: .48;
}

.djr-member-profile-intro {
  max-width: 620px;
  margin: 11px 0 0;
  color: rgba(255,255,255,.64);
  font-size: .9rem;
  line-height: 1.5;
}


/* ---------- Hero account metadata ---------- */

.djr-member-profile-summary {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 24px;
}

.djr-member-profile-summary article {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
}

.djr-member-profile-summary__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #dff4ff;
  background: rgba(96,186,255,.13);
  font-size: .82rem;
  font-weight: 800;
}

.djr-member-profile-summary article div {
  min-width: 0;
}

.djr-member-profile-summary small {
  display: block;
  color: rgba(255,255,255,.48);
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.djr-member-profile-summary strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #f7fbff;
  font-size: .8rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---------- Profile form ---------- */

.djr-member-profile-form-card {
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid #dfe6f0;
  background: #fff;
  box-shadow:
    0 13px 35px rgba(21, 44, 79, .065);
}

.djr-member-profile-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 23px 24px 19px;
  border-bottom: 1px solid #e9edf4;
  background:
    linear-gradient(
      180deg,
      #fff,
      #fbfcff
    );
}

.djr-member-profile-section-head > div:first-child {
  min-width: 0;
}

.djr-member-profile-section-head > div:first-child > span {
  display: block;
  color: #6956e8;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.djr-member-profile-section-head h2 {
  margin: 4px 0 0;
  color: #152034;
  font-size: 1.17rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

.djr-member-profile-section-head p {
  max-width: 610px;
  margin: 5px 0 0;
  color: #748299;
  font-size: .82rem;
  line-height: 1.45;
}

.djr-member-profile-completion-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #5645bd;
  background: #f0edff;
  font-size: .7rem;
  font-weight: 750;
}

.djr-member-profile-completion-badge > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #735fe7;
}

.djr-member-profile-form {
  padding: 22px 24px 24px;
}

.djr-member-profile-form-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 15px 17px;
}

.djr-member-profile-field {
  min-width: 0;
}

.djr-member-profile-field--wide {
  grid-column: 1 / -1;
}

.djr-member-profile-field label {
  display: block;
  margin-bottom: 6px;
  color: #44516a;
  font-size: .73rem;
  font-weight: 750;
}

.djr-member-profile-field label b {
  color: #5d78e5;
  font-weight: 800;
}

.djr-member-profile-control input,
.djr-member-profile-control select,
.djr-member-profile-control textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #d8e0eb !important;
  border-radius: 11px !important;
  outline: none !important;
  background: #f9fbfd !important;
  color: #1d293d !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: .88rem !important;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.djr-member-profile-control textarea {
  min-height: 92px !important;
  resize: vertical;
}

.djr-member-profile-control input:focus,
.djr-member-profile-control select:focus,
.djr-member-profile-control textarea:focus {
  border-color: #72aef0 !important;
  background: #fff !important;
  box-shadow:
    0 0 0 3px rgba(45,137,226,.10) !important;
}

.djr-member-profile-field-errors {
  margin-top: 5px;
  color: #bd4352;
  font-size: .73rem;
}

.djr-member-profile-field-errors ul,
.djr-member-profile-errors ul {
  margin: 0;
  padding-left: 17px;
}

.djr-member-profile-errors {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #a93d49;
  background: #fff0f2;
  border: 1px solid #ffd7dc;
  font-size: .8rem;
}

.djr-member-profile-managed {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 13px 14px;
  border-radius: 13px;
  color: #3d5871;
  background: #eef8ff;
  border: 1px solid #d7edfd;
}

.djr-member-profile-managed__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #347eb8;
  background: #dcedfb;
  font-size: .72rem;
  font-weight: 850;
}

.djr-member-profile-managed strong {
  display: block;
  color: #31516a;
  font-size: .79rem;
}

.djr-member-profile-managed p {
  margin: 2px 0 0;
  color: #658096;
  font-size: .76rem;
  line-height: 1.4;
}

.djr-member-profile-form-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 21px;
  padding-top: 19px;
  border-top: 1px solid #e9edf3;
}

.djr-member-profile-form-footer p {
  max-width: 450px;
  margin: 0;
  color: #8a96a8;
  font-size: .73rem;
  line-height: 1.4;
}

.djr-member-profile-submit {
  appearance: none;
  min-height: 43px;
  padding: 10px 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #49a9ed,
      #357fdc 58%,
      #6254d9
    );
  box-shadow:
    0 8px 20px rgba(50,130,220,.22);
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
}


/* ==========================================================
   Staff portal identity header
   ========================================================== */

.djr-staff-portal-hero {
  padding: clamp(20px, 4vw, 29px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.djr-staff-portal-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 17px;
}

.djr-staff-portal-avatar {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  font-size: 1.48rem;
}

.djr-staff-portal-identity__copy {
  min-width: 0;
}

.djr-staff-portal-hero h1 {
  font-size: clamp(1.55rem, 5vw, 2.25rem);
}

.djr-staff-portal-welcome {
  max-width: 600px;
  margin: 8px 0 0;
  color: rgba(255,255,255,.61);
  font-size: .84rem;
  line-height: 1.45;
}

.djr-staff-portal-hero__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.djr-staff-portal-status,
.djr-staff-alert-button {
  min-height: 35px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 750;
  line-height: 1;
}

.djr-staff-portal-status {
  color: #d8fff0;
  background: rgba(49,198,137,.12);
  border: 1px solid rgba(95,222,169,.18);
}

.djr-staff-portal-status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55dda4;
  box-shadow:
    0 0 0 4px rgba(85,221,164,.10);
}

.djr-staff-alert-button {
  appearance: none;
  color: #e1f4ff;
  background: rgba(95,182,255,.10);
  border: 1px solid rgba(110,192,255,.18);
  font: inherit;
  font-size: .7rem;
  font-weight: 750;
  cursor: pointer;
}

.djr-staff-alert-button__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #74bfff;
  box-shadow:
    0 0 0 4px rgba(116,191,255,.10);
}

.djr-staff-alert-button.is-enabled {
  color: #d9ffef;
  background: rgba(49,198,137,.12);
  border-color: rgba(95,222,169,.18);
}

.djr-staff-alert-button.is-enabled
.djr-staff-alert-button__dot {
  background: #55dda4;
}


/* ---------- Tone down old dashboard typography ---------- */

.member-dashboard .member-section-heading h2,
.member-dashboard .member-panel-heading h2,
.member-dashboard .member-panel-heading h3 {
  color: #19253a;
  font-weight: 790;
  letter-spacing: -.022em;
}

.member-dashboard .eyebrow {
  font-size: .64rem;
  letter-spacing: .10em;
  font-weight: 800;
}

.member-dashboard p,
.member-dashboard li {
  font-size: .84rem;
}

.member-dashboard .member-detail-row > span {
  font-size: .76rem;
}

.member-dashboard code {
  font-size: .76rem;
}

.member-dashboard .member-stat-label {
  font-size: .67rem;
}


/* ---------- Mobile ---------- */

@media (max-width: 720px) {

  .djr-member-profile-page {
    gap: 13px;
    padding-top: 5px;
  }

  .djr-member-profile-hero,
  .djr-member-profile-form-card,
  .djr-staff-portal-hero {
    border-radius: 20px;
  }

  .djr-member-profile-hero__top {
    align-items: flex-start;
  }

  .djr-member-profile-avatar {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    font-size: 1.5rem;
  }

  .djr-member-profile-avatar-status {
    display: none;
  }

  .djr-member-profile-summary {
    grid-template-columns: 1fr;
  }

  .djr-member-profile-summary article {
    padding: 10px 11px;
  }

  .djr-member-profile-section-head {
    padding: 18px;
  }

  .djr-member-profile-completion-badge {
    display: none;
  }

  .djr-member-profile-form {
    padding: 18px;
  }

  .djr-member-profile-form-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .djr-member-profile-field--wide {
    grid-column: auto;
  }

  .djr-member-profile-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .djr-member-profile-submit {
    width: 100%;
  }

  .djr-staff-portal-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .djr-staff-portal-identity {
    align-items: flex-start;
  }

  .djr-staff-portal-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 1.28rem;
  }

  .djr-staff-portal-hero__actions {
    width: 100%;
    justify-content: flex-start;
  }

}


@media (max-width: 430px) {

  .djr-member-profile-hero {
    padding: 19px;
  }

  .djr-member-profile-hero__top {
    gap: 13px;
  }

  .djr-member-profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    font-size: 1.24rem;
  }

  .djr-member-profile-hero h1 {
    font-size: 1.55rem;
  }

  .djr-member-profile-intro {
    font-size: .8rem;
  }

  .djr-member-profile-section-head h2 {
    font-size: 1.08rem;
  }

}


/* ==========================================================
   DJR STAFF BULLETIN CENTRE
   ========================================================== */

.djr-bulletin-strip {
  margin: 0 0 14px;
}

.djr-bulletin-strip__button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 13px;
  align-items: center;
  border: 1px solid rgba(116,142,183,.16);
  border-radius: 20px;
  padding: 14px 15px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.98),
      rgba(247,250,255,.98)
    );
  box-shadow:
    0 10px 28px rgba(18,42,76,.08);
  color: #172033;
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.djr-bulletin-strip__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg,#e9f5ff,#e9e6ff);
  color: #3b82e8;
}

.djr-bulletin-strip__icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.djr-bulletin-strip__copy {
  min-width: 0;
}

.djr-bulletin-strip__eyebrow {
  display: block;
  color: #2489ec;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .13em;
}

.djr-bulletin-strip__title {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #172033;
  font-size: .98rem;
  font-weight: 850;
}

.djr-bulletin-strip__summary {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #718096;
  font-size: .76rem;
}

.djr-bulletin-strip__side {
  display: flex;
  align-items: center;
  gap: 7px;
}

.djr-bulletin-strip__count {
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #e64955;
  box-shadow: 0 5px 12px rgba(230,73,85,.25);
  font-size: .72rem;
  font-weight: 850;
}

.djr-bulletin-strip__chevron {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf4fb;
  color: #72849b;
  font-size: 1.25rem;
  font-weight: 800;
}


.djr-bulletin-centre[hidden] {
  display: none !important;
}

.djr-bulletin-centre {
  position: fixed;
  inset: 0;
  z-index: 5000;
}

.djr-bulletin-centre__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,11,24,.54);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .18s ease;
}

.djr-bulletin-centre__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(
      180deg,
      #f7f9fc 0%,
      #eef2f7 100%
    );
  transform: translateY(18px);
  opacity: 0;
  transition:
    transform .18s ease,
    opacity .18s ease;
}

.djr-bulletin-centre.is-open
.djr-bulletin-centre__backdrop {
  opacity: 1;
}

.djr-bulletin-centre.is-open
.djr-bulletin-centre__panel {
  transform: translateY(0);
  opacity: 1;
}

html.djr-bulletin-modal-open,
body.djr-bulletin-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.djr-bulletin-centre__header {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding:
    calc(env(safe-area-inset-top) + 24px)
    22px
    22px;
  color: #fff;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(69,184,255,.30),
      transparent 34%
    ),
    radial-gradient(
      circle at 75% 120%,
      rgba(115,82,235,.38),
      transparent 46%
    ),
    linear-gradient(
      135deg,
      #0d1c34,
      #17375e 58%,
      #33266e
    );
}

.djr-bulletin-centre__eyebrow {
  display: block;
  color: #8ed4ff;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .14em;
}

.djr-bulletin-centre__header h2 {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(1.7rem,7vw,2.35rem);
  letter-spacing: -.035em;
}

.djr-bulletin-centre__header p {
  max-width: 560px;
  margin: 7px 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}

.djr-bulletin-centre__close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(255,255,255,.11);
  color: #fff;
}

.djr-bulletin-centre__close svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.djr-bulletin-centre__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    18px
    18px
    calc(env(safe-area-inset-bottom) + 26px);
}

.djr-bulletin-list {
  width: min(100%,760px);
  margin: 0 auto;
  display: grid;
  gap: 13px;
}

.djr-bulletin-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid #dce4ef;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 10px 28px rgba(20,42,73,.065);
}

.djr-bulletin-card--unread {
  border-color: #b9d9f7;
  box-shadow:
    0 12px 32px rgba(36,137,236,.11);
}

.djr-bulletin-card--unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #2489ec;
}

.djr-bulletin-card--important {
  background:
    linear-gradient(
      180deg,
      #fff,
      #fffbf1
    );
}

.djr-bulletin-card--important::before {
  background: #e59b28;
}

.djr-bulletin-card--urgent {
  background:
    linear-gradient(
      180deg,
      #fff,
      #fff5f6
    );
}

.djr-bulletin-card--urgent::before {
  background: #e64955;
}

.djr-bulletin-card--pinned {
  box-shadow:
    0 13px 34px rgba(83,72,185,.11);
}

.djr-bulletin-card__topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.djr-bulletin-card__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.djr-bulletin-badge {
  min-height: 24px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #edf3fa;
  color: #5e7088;
  font-size: .67rem;
  font-weight: 800;
}

.djr-bulletin-badge--pin {
  background: #eeeaff;
  color: #5f4bc8;
}

.djr-bulletin-badge--important {
  background: #fff0cf;
  color: #9c650d;
}

.djr-bulletin-badge--urgent {
  background: #ffe5e8;
  color: #af2e3b;
}

.djr-bulletin-badge--task {
  background: #e7f4ff;
  color: #2378c8;
}

.djr-bulletin-card__new {
  flex: 0 0 auto;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: #e64955;
  font-size: .67rem;
  font-weight: 850;
}

.djr-bulletin-card__title {
  margin: 13px 0 0;
  color: #172033;
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.djr-bulletin-card__meta {
  margin-top: 6px;
  display: flex;
  gap: 7px 12px;
  flex-wrap: wrap;
  color: #8090a5;
  font-size: .73rem;
  font-weight: 650;
}

.djr-bulletin-card__body {
  margin-top: 14px;
  color: #4f6077;
  font-size: .92rem;
  line-height: 1.6;
}

.djr-bulletin-card__footer {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid #edf0f5;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.djr-bulletin-ack-button,
.djr-bulletin-task__open {
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  background:
    linear-gradient(135deg,#329fe9,#267edc);
  box-shadow: 0 7px 18px rgba(36,137,236,.20);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none !important;
}

.djr-bulletin-acknowledged {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #e9f8f2;
  color: #147250;
  font-size: .78rem;
  font-weight: 800;
}

.djr-bulletin-card__status {
  color: #9b4a55;
  font-size: .75rem;
}

.djr-bulletin-task {
  margin-top: 17px;
  padding: 14px;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background:
    linear-gradient(
      135deg,
      #f3f8ff,
      #f3f0ff
    );
  border: 1px solid #dbe7f7;
}

.djr-bulletin-task__eyebrow {
  display: block;
  color: #5b5ac8;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .1em;
}

.djr-bulletin-task strong {
  display: block;
  margin-top: 3px;
  color: #1f2d43;
}

.djr-bulletin-task small {
  display: block;
  margin-top: 3px;
  color: #7b8ca1;
}

.djr-bulletin-task__done {
  flex: 0 0 auto;
  color: #147250;
  font-size: .78rem;
  font-weight: 850;
}

.djr-bulletin-empty {
  width: min(100%,560px);
  margin: 12vh auto 0;
  text-align: center;
  padding: 28px 24px;
  border: 1px solid #dce4ef;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(20,42,73,.07);
}

.djr-bulletin-empty__icon {
  width: 58px;
  height: 58px;
  margin: 0 auto;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #4a8ddd;
  background:
    linear-gradient(135deg,#e8f4ff,#ece9ff);
}

.djr-bulletin-empty__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.djr-bulletin-empty h3 {
  margin: 14px 0 0;
  color: #172033;
  font-size: 1.2rem;
}

.djr-bulletin-empty p {
  margin: 7px 0 0;
  color: #738399;
  line-height: 1.5;
}


@media (min-width: 760px) {

  .djr-bulletin-centre__panel {
    inset:
      4vh
      max(4vw,30px);
    border-radius: 26px;
    overflow: hidden;
    box-shadow:
      0 30px 90px rgba(2,12,30,.26);
  }

}


@media (max-width: 520px) {

  .djr-bulletin-strip__button {
    padding: 13px;
    border-radius: 18px;
  }

  .djr-bulletin-strip__icon {
    width: 41px;
    height: 41px;
  }

  .djr-bulletin-strip__summary {
    display: none;
  }

  .djr-bulletin-centre__header {
    padding:
      calc(env(safe-area-inset-top) + 21px)
      18px
      19px;
  }

  .djr-bulletin-centre__header p {
    font-size: .86rem;
  }

  .djr-bulletin-centre__scroll {
    padding:
      14px
      13px
      calc(env(safe-area-inset-bottom) + 22px);
  }

  .djr-bulletin-card {
    padding: 16px;
    border-radius: 18px;
  }

  .djr-bulletin-task {
    align-items: flex-start;
    flex-direction: column;
  }

}



/* ==========================================================
   DJR STAFF BULLETIN CENTRE V3
   ========================================================== */

html.djr-bulletin-open,
body.djr-bulletin-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}


.djr-staff-bulletin-button {
  position: relative;
  appearance: none;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(160, 129, 255, .36);
  background:
    linear-gradient(
      135deg,
      rgba(111, 77, 230, .30),
      rgba(106, 82, 224, .18)
    );
  color: #f4efff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: .84rem;
  font-weight: 780;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 24px rgba(69,43,164,.12);
  -webkit-tap-highlight-color: transparent;
}

.djr-staff-bulletin-button:active {
  transform: scale(.975);
}

.djr-staff-bulletin-button__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.djr-staff-bulletin-button__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.djr-staff-bulletin-button__badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #ff4d67,
      #e52d4f
    );
  border: 2px solid rgba(27,32,73,.75);
  box-shadow:
    0 4px 12px rgba(229,45,79,.34);
  font-size: .67rem;
  font-weight: 850;
}


.djr-bulletin-drawer[hidden],
.djr-bulletin-fullscreen[hidden] {
  display: none !important;
}


.djr-bulletin-drawer {
  position: fixed;
  inset: 0;
  z-index: 16000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.djr-bulletin-drawer__backdrop {
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(4,10,22,.54);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .22s ease;
}

.djr-bulletin-drawer__sheet {
  position: relative;
  z-index: 1;
  width: min(100% - 18px, 620px);
  max-height: min(76dvh, 720px);
  margin-bottom:
    max(
      9px,
      env(safe-area-inset-bottom)
    );
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(213,221,236,.88);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.99),
      rgba(246,248,253,.99)
    );
  box-shadow:
    0 32px 90px rgba(5,15,35,.30);
  transform:
    translateY(calc(100% + 30px))
    scale(.985);
  opacity: 0;
  transition:
    transform .28s cubic-bezier(.22,.8,.27,1),
    opacity .22s ease;
}

.djr-bulletin-drawer.is-open
.djr-bulletin-drawer__backdrop {
  opacity: 1;
}

.djr-bulletin-drawer.is-open
.djr-bulletin-drawer__sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}


.djr-bulletin-drawer__header {
  padding: 19px 19px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.djr-bulletin-drawer__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.djr-bulletin-drawer__mark {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #755be8,
      #5141cc
    );
  box-shadow:
    0 9px 22px rgba(90,67,203,.25);
}

.djr-bulletin-drawer__mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.djr-bulletin-drawer__heading p {
  margin: 0 0 2px;
  color: #735dde;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.djr-bulletin-drawer__heading h2 {
  margin: 0;
  color: #172033;
  font-size: 1.24rem;
  letter-spacing: -.025em;
}

.djr-bulletin-close {
  appearance: none;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 1px solid #e0e6ef;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #f5f7fa;
  color: #536174;
}

.djr-bulletin-close svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}


.djr-bulletin-drawer__summary {
  min-height: 0;
  overflow-y: auto;
  padding: 2px 14px 15px;
  display: grid;
  gap: 9px;
  -webkit-overflow-scrolling: touch;
}

.djr-bulletin-preview {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns:
    10px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px;
  text-align: left;
  border-radius: 17px;
  border: 1px solid #e2e7ef;
  background: #fff;
  color: #172033;
  font: inherit;
  box-shadow:
    0 6px 18px rgba(19,39,67,.045);
}

.djr-bulletin-preview--unread {
  border-color: #d5caff;
  background:
    linear-gradient(
      135deg,
      #fff,
      #f8f6ff
    );
}

.djr-bulletin-preview__status {
  width: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.djr-bulletin-preview__status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #765be8;
  box-shadow:
    0 0 0 5px rgba(118,91,232,.10);
}

.djr-bulletin-preview--urgent
.djr-bulletin-preview__status span {
  background: #eb405d;
  box-shadow:
    0 0 0 5px rgba(235,64,93,.10);
}

.djr-bulletin-preview__copy {
  min-width: 0;
  display: block;
}

.djr-bulletin-preview__meta {
  display: block;
  margin-bottom: 3px;
  color: #7b8798;
  font-size: .65rem;
  font-weight: 820;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.djr-bulletin-preview__copy strong {
  display: block;
  color: #172033;
  font-size: .94rem;
  line-height: 1.28;
}

.djr-bulletin-preview__body {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: #6c788a;
  font-size: .78rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.djr-bulletin-preview__arrow {
  width: 31px;
  height: 31px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #6750d7;
  background: #f0edff;
}

.djr-bulletin-preview__arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.djr-bulletin-empty {
  padding: 34px 18px;
  display: grid;
  justify-items: center;
  text-align: center;
}

.djr-bulletin-empty__icon {
  width: 55px;
  height: 55px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  color: #23946c;
  background: #e8f8f1;
}

.djr-bulletin-empty__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.djr-bulletin-empty strong {
  color: #172033;
  font-size: 1rem;
}

.djr-bulletin-empty p {
  max-width: 310px;
  margin: 6px 0 0;
  color: #768295;
  line-height: 1.45;
  font-size: .84rem;
}


.djr-bulletin-drawer__footer {
  padding:
    12px 14px
    calc(
      12px +
      env(safe-area-inset-bottom)
    );
  border-top: 1px solid #e6eaf1;
  background: rgba(255,255,255,.92);
}

.djr-bulletin-expand-button {
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 0;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #755be8,
      #5845d4
    );
  box-shadow:
    0 9px 22px rgba(88,69,212,.22);
  font: inherit;
  font-size: .9rem;
  font-weight: 780;
}

.djr-bulletin-expand-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Fullscreen bulletin app */

.djr-bulletin-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 17000;
  background: #eef2f7;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22,.8,.27,1);
}

.djr-bulletin-fullscreen.is-open {
  opacity: 1;
  transform: translateY(0);
}

.djr-bulletin-fullscreen__app {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(
      180deg,
      #0a1427 0,
      #0a1427 190px,
      #eef2f7 190px,
      #eef2f7 100%
    );
}

.djr-bulletin-fullscreen__topbar {
  flex: 0 0 auto;
  min-height:
    calc(
      72px +
      env(safe-area-inset-top)
    );
  padding:
    calc(
      12px +
      env(safe-area-inset-top)
    )
    18px
    12px;
  display: grid;
  grid-template-columns:
    auto minmax(0,1fr) auto;
  gap: 13px;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #0c1c35,
      #182b50 58%,
      #302367
    );
  box-shadow:
    0 8px 24px rgba(5,13,29,.16);
}

.djr-bulletin-fullscreen__back {
  appearance: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13);
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.08);
}

.djr-bulletin-fullscreen__back svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.djr-bulletin-fullscreen__topbar p {
  margin: 0 0 2px;
  color: #8dcfff;
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .13em;
}

.djr-bulletin-fullscreen__topbar h2 {
  margin: 0;
  color: #fff;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}

.djr-bulletin-fullscreen__counter {
  min-width: 29px;
  height: 29px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #ff4f69,
      #de294c
    );
  box-shadow:
    0 5px 15px rgba(222,41,76,.30);
  font-size: .75rem;
  font-weight: 850;
}


.djr-bulletin-fullscreen__intro {
  flex: 0 0 auto;
  padding: 22px 22px 18px;
  color: #fff;
  background:
    radial-gradient(
      circle at 92% -20%,
      rgba(67,177,255,.34),
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 130%,
      rgba(104,73,225,.38),
      transparent 50%
    );
}

.djr-bulletin-fullscreen__intro h3 {
  margin: 2px 0 5px;
  color: #fff;
  font-size: 1.55rem;
  letter-spacing: -.035em;
}

.djr-bulletin-fullscreen__intro p:not(
  .djr-bulletin-fullscreen__eyebrow
) {
  max-width: 570px;
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: .86rem;
  line-height: 1.45;
}

.djr-bulletin-fullscreen__eyebrow {
  margin: 0;
  color: #8fcfff;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .12em;
}


.djr-bulletin-feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding:
    16px 14px
    calc(
      30px +
      env(safe-area-inset-bottom)
    );
  display: grid;
  align-content: start;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}


.djr-bulletin-card {
  scroll-margin-top: 16px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #dfe5ee;
  background: #fff;
  box-shadow:
    0 8px 24px rgba(22,43,74,.06);
}

.djr-bulletin-card--unread {
  border-color: #cfc4ff;
  box-shadow:
    0 9px 28px rgba(93,69,211,.11);
}

.djr-bulletin-card--urgent {
  border-top: 3px solid #e94560;
}

.djr-bulletin-card--important {
  border-top: 3px solid #765be8;
}

.djr-bulletin-card__header {
  padding: 15px 16px 11px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.djr-bulletin-card__type {
  display: flex;
  gap: 10px;
  align-items: center;
}

.djr-bulletin-card__type-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #654dd4;
  background: #efecff;
}

.djr-bulletin-card--urgent
.djr-bulletin-card__type-icon {
  color: #d93b57;
  background: #fff0f3;
}

.djr-bulletin-card__type-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.djr-bulletin-card__label {
  display: block;
  color: #5e6c81;
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .09em;
}

.djr-bulletin-card__priority {
  display: block;
  margin-top: 2px;
  color: #8290a2;
  font-size: .72rem;
}

.djr-bulletin-card__flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.djr-bulletin-tag {
  padding: 5px 8px;
  border-radius: 999px;
  color: #6956c7;
  background: #f0edff;
  font-size: .64rem;
  font-weight: 790;
}

.djr-bulletin-tag--new {
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #ff526a,
      #df2e4e
    );
}


.djr-bulletin-card__content {
  padding: 2px 16px 16px;
}

.djr-bulletin-card__content h4 {
  margin: 0;
  color: #172033;
  font-size: 1.16rem;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.djr-bulletin-card__date {
  margin: 5px 0 13px;
  color: #8a96a7;
  font-size: .72rem;
}

.djr-bulletin-card__message {
  color: #4f5d71;
  font-size: .9rem;
  line-height: 1.55;
}


.djr-bulletin-card__footer {
  padding: 13px 16px 15px;
  border-top: 1px solid #edf0f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #fbfcfe;
}

.djr-bulletin-card__task-label {
  display: block;
  margin-bottom: 2px;
  color: #8894a5;
  font-size: .61rem;
  font-weight: 820;
  letter-spacing: .08em;
}

.djr-bulletin-card__footer strong {
  display: block;
  color: #263246;
  font-size: .82rem;
}

.djr-bulletin-card__footer small {
  display: block;
  margin-top: 2px;
  color: #8692a3;
  font-size: .7rem;
}


.djr-bulletin-task-button,
.djr-bulletin-ack-button {
  appearance: none;
  min-height: 39px;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  color: #fff !important;
  background:
    linear-gradient(
      135deg,
      #755be8,
      #5946d2
    );
  box-shadow:
    0 7px 17px rgba(89,70,210,.18);
  font: inherit;
  font-size: .77rem;
  font-weight: 780;
}

.djr-bulletin-task-button svg,
.djr-bulletin-ack-button svg,
.djr-bulletin-complete svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.djr-bulletin-ack-button.is-complete {
  color: #177151 !important;
  background: #e8f8f1;
  box-shadow: none;
}

.djr-bulletin-complete {
  min-height: 37px;
  padding: 8px 11px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #177151;
  background: #e8f8f1;
  font-size: .75rem;
  font-weight: 780;
}

.djr-bulletin-card__feedback {
  color: #7c899a;
  font-size: .7rem;
}


.djr-bulletin-feed-empty {
  margin-top: 18px;
  padding: 45px 22px;
  border: 1px solid #dfe5ee;
  border-radius: 22px;
  display: grid;
  justify-items: center;
  text-align: center;
  background: #fff;
}

.djr-bulletin-feed-empty > span {
  width: 62px;
  height: 62px;
  margin-bottom: 15px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #24966d;
  background: #e9f8f2;
}

.djr-bulletin-feed-empty svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.djr-bulletin-feed-empty h3 {
  margin: 0;
  color: #172033;
  font-size: 1.08rem;
}

.djr-bulletin-feed-empty p {
  max-width: 330px;
  margin: 7px 0 0;
  color: #768396;
  line-height: 1.5;
  font-size: .84rem;
}


@media (min-width: 760px) {

  .djr-bulletin-feed {
    padding-left: max(22px, calc((100vw - 760px) / 2));
    padding-right: max(22px, calc((100vw - 760px) / 2));
  }

  .djr-bulletin-fullscreen__intro > div {
    width: min(716px, 100%);
    margin: 0 auto;
  }

}

/* ==========================================================
   DJR STAFF HERO CONTROLS
   Single authoritative layout
   ========================================================== */

.djr-staff-portal-hero__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.djr-staff-portal-hero__actions > .djr-staff-portal-status,
.djr-staff-portal-hero__actions > .djr-staff-alert-button,
.djr-staff-portal-hero__actions > .djr-staff-bulletin-button {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  white-space: nowrap;
}


/* ---------- Mobile ---------- */

@media (max-width: 760px) {

  .djr-staff-portal-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
  }

  .djr-staff-portal-identity {
    width: 100% !important;
    min-width: 0 !important;
  }

  .djr-staff-portal-hero__actions {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 6px !important;
  }

  .djr-staff-portal-hero__actions > .djr-staff-portal-status,
  .djr-staff-portal-hero__actions > .djr-staff-alert-button,
  .djr-staff-portal-hero__actions > .djr-staff-bulletin-button {
    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    min-height: 34px !important;
    padding: 7px 8px !important;

    font-size: .68rem !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  .djr-staff-portal-status > span,
  .djr-staff-alert-button__dot {
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 6px !important;
  }

  .djr-staff-bulletin-button__icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }

  .djr-staff-bulletin-button__badge {
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    font-size: .58rem !important;
  }
}


/* ---------- Very narrow phones ---------- */

@media (max-width: 390px) {

  .djr-staff-portal-hero__actions {
    gap: 5px !important;
  }

  .djr-staff-portal-hero__actions > .djr-staff-portal-status,
  .djr-staff-portal-hero__actions > .djr-staff-alert-button,
  .djr-staff-portal-hero__actions > .djr-staff-bulletin-button {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: .64rem !important;
  }
}


/* DJR STAFF NAVIGATION CONTROLS V1 */


/* ==========================================================
   Hero overflow menu
   ========================================================== */

.djr-staff-hero-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 50;
}


.djr-staff-hero-menu__button {
  appearance: none;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid rgba(126, 191, 255, .24);

  color: #dff4ff;

  background:
    linear-gradient(
      135deg,
      rgba(64, 166, 240, .18),
      rgba(86, 104, 226, .15)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07);

  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


.djr-staff-hero-menu__button:active {
  transform: scale(.96);
}


.djr-staff-hero-menu.is-open
.djr-staff-hero-menu__button {
  border-color: rgba(119, 194, 255, .46);

  background:
    linear-gradient(
      135deg,
      rgba(52, 160, 239, .28),
      rgba(92, 86, 221, .22)
    );
}


.djr-staff-hero-menu__panel[hidden] {
  display: none !important;
}


.djr-staff-hero-menu__panel {
  position: absolute;
  z-index: 17000;

  right: 0;
  top: calc(100% + 9px);

  width: min(270px, calc(100vw - 34px));

  padding: 7px;

  border-radius: 18px;
  border: 1px solid rgba(211, 222, 237, .92);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.995),
      rgba(246,249,253,.995)
    );

  box-shadow:
    0 22px 55px rgba(5,17,38,.25);

  transform-origin: top right;
}


.djr-staff-hero-menu__panel > a {
  min-height: 43px;

  padding: 9px 12px;

  display: flex;
  align-items: center;
  gap: 10px;

  border-radius: 12px;

  color: #26354b !important;

  font-size: .8rem;
  font-weight: 720;

  text-decoration: none !important;

  -webkit-tap-highlight-color: transparent;
}


.djr-staff-hero-menu__panel > a:active {
  background: #edf5ff;
}


.djr-staff-hero-menu__item--primary {
  background:
    linear-gradient(
      135deg,
      #edf7ff,
      #eef2ff
    );
}


.djr-staff-hero-menu__item--primary > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}


.djr-staff-hero-menu__item--primary strong {
  color: #087bd8;
  font-size: .81rem;
}


.djr-staff-hero-menu__item--primary small {
  color: #718096;
  font-size: .66rem;
  font-weight: 650;
}


.djr-staff-hero-menu__item-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color: #1389df;
  background: rgba(61, 166, 239, .12);
}


.djr-staff-hero-menu__item-icon svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.djr-staff-hero-menu__divider {
  height: 1px;
  margin: 6px 8px;
  background: #e8edf4;
}


/* ==========================================================
   Keep the fourth control neatly on the hero row
   ========================================================== */

@media (max-width: 760px) {

  .djr-staff-portal-hero__actions {
    gap: 6px !important;
  }

  .djr-staff-hero-menu {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
  }

  .djr-staff-hero-menu__button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    font-size: .60rem !important;
  }

}


@media (max-width: 390px) {

  .djr-staff-portal-hero__actions {
    gap: 4px !important;
  }

  .djr-staff-portal-hero__actions >
  .djr-staff-portal-status,

  .djr-staff-portal-hero__actions >
  .djr-staff-alert-button,

  .djr-staff-portal-hero__actions >
  .djr-staff-bulletin-button {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .djr-staff-hero-menu {
    flex-basis: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
  }

  .djr-staff-hero-menu__button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

}


/* ==========================================================
   Scroll-aware Back / Home navigation
   ========================================================== */

.djr-staff-scroll-nav {
  position: fixed;

  left: 0;
  right: 0;

  top:
    calc(
      env(safe-area-inset-top)
      + 9px
    );

  z-index: 15500;

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

  padding:
    0
    max(13px, env(safe-area-inset-right))
    0
    max(13px, env(safe-area-inset-left));

  pointer-events: none;

  opacity: 0;

  transform: translateY(-12px);

  transition:
    opacity .20s ease,
    transform .22s cubic-bezier(.22,.8,.27,1);

  visibility: hidden;
}


.djr-staff-scroll-nav.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}


.djr-staff-scroll-nav__button {
  pointer-events: auto;

  appearance: none;

  min-height: 38px;

  border: 1px solid rgba(77, 168, 237, .27);
  border-radius: 999px;

  color: #0879cc !important;

  background:
    rgba(234, 247, 255, .94);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    0 7px 22px rgba(23, 78, 124, .14),
    inset 0 1px 0 rgba(255,255,255,.82);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font: inherit;
  font-size: .76rem;
  font-weight: 800;

  text-decoration: none !important;

  -webkit-tap-highlight-color: transparent;
}


.djr-staff-scroll-nav__button:active {
  transform: scale(.96);
}


.djr-staff-scroll-nav__button svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.djr-staff-scroll-nav__button--back {
  padding: 8px 13px 8px 9px;
  gap: 3px;
}


.djr-staff-scroll-nav__button--home {
  width: 40px;
  min-width: 40px;
  padding: 0;
}


@media (min-width: 761px) {

  .djr-staff-scroll-nav {
    left: 50%;
    right: auto;

    width: min(1180px, calc(100% - 32px));

    transform:
      translateX(-50%)
      translateY(-12px);
  }


  .djr-staff-scroll-nav.is-visible {
    transform:
      translateX(-50%)
      translateY(0);
  }

}



/* ==========================================================
   DJR STAFF NAV — HERO MENU SIZE + SCROLL POSITION TUNE
   ========================================================== */

@media (max-width: 760px) {

  /*
   * Match the overflow button to the neighbouring hero pills.
   */
  .djr-staff-hero-menu {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    align-self: stretch !important;
  }

  .djr-staff-hero-menu__button {
    width: 40px !important;
    min-width: 40px !important;
    height: 100% !important;
    min-height: 40px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 999px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: .72rem !important;
    letter-spacing: .08em !important;
  }

  /*
   * Make all four hero controls use the same vertical footprint.
   */
  .djr-staff-portal-hero__actions >
  .djr-staff-portal-status,

  .djr-staff-portal-hero__actions >
  .djr-staff-alert-button,

  .djr-staff-portal-hero__actions >
  .djr-staff-bulletin-button,

  .djr-staff-portal-hero__actions >
  .djr-staff-hero-menu {
    min-height: 40px !important;
  }

}


@media (max-width: 390px) {

  .djr-staff-hero-menu {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
  }

  .djr-staff-hero-menu__button {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

}


/* ==========================================================
   DJR STAFF HERO MENU — STACK ABOVE PAGE CONTENT
   ========================================================== */

.djr-staff-portal-hero {
  position: relative !important;
  z-index: 50 !important;
  overflow: visible !important;
}

.djr-staff-portal-hero__actions {
  position: relative !important;
  z-index: 60 !important;
  overflow: visible !important;
}

.djr-staff-hero-menu {
  position: relative !important;
  z-index: 70 !important;
  overflow: visible !important;
}

.djr-staff-hero-menu__button {
  position: relative !important;
  z-index: 71 !important;
}

.djr-staff-hero-menu__panel,
.djr-staff-hero-menu__dropdown,
[data-djr-staff-menu-panel] {
  position: absolute !important;
  z-index: 20000 !important;

  top: calc(100% + 8px) !important;
  right: 0 !important;

  overflow: visible !important;
}

.member-dashboard,
.member-stats,
.member-primary-grid,
.member-section {
  position: relative;
  z-index: 1;
}


/* ==========================================================
   DJR STAFF PORTAL — MOBILE VIEWPORT / CENTRING LOCK
   Positioning only. No visual design changes.
   ========================================================== */

/*
 * Prevent any staff-portal element from increasing the
 * document's horizontal scrollable width on mobile.
 */
html,
body {
  max-width: 100% !important;
}

body:has(.member-dashboard) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  overscroll-behavior-x: none !important;
}

/*
 * Keep the actual staff dashboard canvas centred inside
 * the physical viewport at all times.
 */
body:has(.member-dashboard) .shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: clip !important;
}

body:has(.member-dashboard) .member-dashboard {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: clip !important;
}

/*
 * Decorative elements may intentionally extend outside their
 * cards, but must never create horizontal document overflow.
 */
body:has(.member-dashboard) .djr-staff-portal-hero,
body:has(.member-dashboard) .djr-staff-portal-identity,
body:has(.member-dashboard) .djr-staff-portal-hero__glow {
  max-width: 100% !important;
}

/*
 * Any direct staff-dashboard child must be allowed to shrink
 * instead of forcing the viewport wider.
 */
body:has(.member-dashboard) .member-dashboard > *,
body:has(.member-dashboard) .member-dashboard * {
  min-width: 0;
}

/*
 * Images/media must never enlarge the page canvas.
 */
body:has(.member-dashboard) img,
body:has(.member-dashboard) video,
body:has(.member-dashboard) iframe {
  max-width: 100%;
}

/*
 * Mobile-only hard lock. Vertical scrolling remains normal.
 */
@media (max-width: 760px) {
  html:has(.member-dashboard),
  body:has(.member-dashboard) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    overflow-x: clip !important;

    touch-action: pan-y !important;
  }

  body:has(.member-dashboard) .shell,
  body:has(.member-dashboard) .member-dashboard {
    left: auto !important;
    right: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-inline: auto !important;

    transform: none !important;
  }
}


/* ==========================================================
   DJR STAFF FIXED UI — TRUE VIEWPORT CENTRE
   ========================================================== */

/*
 * Fixed bottom navigation must be positioned from the actual
 * viewport centre, not from a potentially shifted page box.
 *
 * Existing width, height, colours, spacing and styling remain.
 */
@media (max-width: 760px) {
  body:has(.member-dashboard) .djr-staff-bottom-nav,
  body:has(.member-dashboard) [data-djr-staff-bottom-nav],
  body:has(.member-dashboard) .djr-staff-nav {
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }
}


/* ==========================================================
   IOS SAFETY — DO NOT ALLOW SIDEWAYS PAGE RETENTION
   ========================================================== */

@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    html:has(.member-dashboard),
    body:has(.member-dashboard) {
      overflow-x: hidden !important;
    }

    body:has(.member-dashboard) {
      position: relative !important;
    }
  }
}



/* ==========================================================
   DJR STAFF DASHBOARD — MODULE WIDGETS
   ========================================================== */

.djr-staff-module-area {
  display: grid;
  gap: 14px;
  margin: 18px 0 20px;
}

.djr-staff-module-area__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.djr-staff-module-area__heading h2 {
  margin: 2px 0 0;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
}

.djr-staff-module-area__eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.58;
}

.djr-staff-module-area__count {
  display: grid;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  place-items: center;

  border: 1px solid rgba(115, 138, 178, 0.22);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.82);

  font-size: 0.75rem;
  font-weight: 800;
}

.djr-staff-module-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.djr-staff-module-card {
  position: relative;

  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;

  width: 100%;
  min-width: 0;

  padding: 15px;

  border: 1px solid rgba(119, 144, 184, 0.2);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(246, 249, 253, 0.95)
    );

  box-shadow:
    0 10px 30px rgba(20, 38, 69, 0.06);

  color: inherit;
  text-align: left;
  text-decoration: none;
  font: inherit;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}

.djr-staff-module-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(76, 111, 255, 0.12),
      rgba(101, 70, 255, 0.08)
    );

  color: #335eea;
}

.djr-staff-module-card__icon svg {
  width: 25px;
  height: 25px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.djr-staff-module-card__body {
  display: grid;
  align-content: center;
  min-width: 0;
}

.djr-staff-module-card__body small {
  margin-bottom: 3px;

  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;

  opacity: 0.5;
}

.djr-staff-module-card__body strong {
  overflow: hidden;

  font-size: 0.95rem;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.djr-staff-module-card__body > span {
  margin-top: 3px;

  font-size: 0.75rem;
  line-height: 1.35;

  opacity: 0.64;
}

.djr-staff-module-card__status {
  position: absolute;
  top: 11px;
  right: 11px;

  padding: 4px 8px;

  border-radius: 999px;

  background: rgba(46, 91, 255, 0.09);

  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.djr-staff-module-card__status--active {
  background: rgba(33, 166, 105, 0.1);
}

.djr-staff-module-card--setup {
  border-style: dashed;
}

.djr-staff-module-card:hover {
  transform: translateY(-1px);
}

.djr-staff-module-card:focus-visible {
  outline: 3px solid rgba(59, 104, 255, 0.22);
  outline-offset: 2px;
}


@media (max-width: 520px) {

  .djr-staff-module-grid {
    grid-template-columns: 1fr;
  }

  .djr-staff-module-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 13px;
    border-radius: 16px;
  }

  .djr-staff-module-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

}


/* ==========================================================
   DJR STAFF MODULE — OAUTH RETURN FEEDBACK
   Temporary functional styling; visual polish comes later.
   ========================================================== */

.djr-staff-module-feedback {
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.djr-staff-module-feedback--success {
  background: rgba(40,180,110,.10);
}

.djr-staff-module-feedback--error {
  background: rgba(220,70,90,.10);
}


/* ==========================================================
   DJR STAFF — ACCOUNT INFORMATION DRAWER
   ========================================================== */

.djr-account-drawer-trigger {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
}

.djr-account-drawer-trigger__chevron {
  width: 15px;
  height: 15px;
  margin-left: 2px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform .22s ease;
}

.djr-account-drawer-trigger.is-open
.djr-account-drawer-trigger__chevron {
  transform: rotate(180deg);
}


.djr-account-drawer {
  position: relative;
  z-index: 20;

  width: 100%;
  margin:
    -1px
    0
    18px;

  opacity: 0;
  transform: translateY(-8px);

  transition:
    opacity .20s ease,
    transform .24s cubic-bezier(.22,.8,.27,1);
}

.djr-account-drawer[hidden] {
  display: none !important;
}

.djr-account-drawer.is-visible {
  opacity: 1;
  transform: translateY(0);
}


.djr-account-drawer__shell {
  position: relative;
  overflow: hidden;

  width: 100%;

  padding:
    20px
    20px
    18px;

  border:
    1px solid
    rgba(107, 167, 255, .22);

  border-radius:
    0
    0
    28px
    28px;

  background:
    radial-gradient(
      circle at 94% -15%,
      rgba(115, 81, 236, .30),
      transparent 38%
    ),
    radial-gradient(
      circle at 12% 10%,
      rgba(24, 145, 236, .18),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #0b1c38 0%,
      #102a51 57%,
      #262061 100%
    );

  box-shadow:
    0 20px 46px
    rgba(8, 27, 57, .18),
    inset 0 1px 0
    rgba(255,255,255,.09);

  color: #fff;
}


.djr-account-drawer__shell::after {
  content: "";

  position: absolute;
  width: 210px;
  height: 210px;

  right: -95px;
  top: -115px;

  border:
    24px solid
    rgba(132, 174, 255, .07);

  border-radius: 50%;

  pointer-events: none;
}


.djr-account-drawer__header {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 17px;
}


.djr-account-drawer__eyebrow {
  margin: 0 0 4px;

  color: #7fc9ff;

  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .16em;
}


.djr-account-drawer__header h2 {
  margin: 0;

  color: #fff;

  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -.02em;
}


.djr-account-drawer__live {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 11px;

  border:
    1px solid
    rgba(75, 226, 173, .23);

  border-radius: 999px;

  background:
    rgba(44, 200, 154, .11);

  color: #caffeb;

  font-size: .70rem;
  font-weight: 800;
}


.djr-account-drawer__live > span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #45dda8;

  box-shadow:
    0 0 0 5px
    rgba(69, 221, 168, .11);
}


.djr-account-drawer__rows {
  position: relative;
  z-index: 1;

  overflow: hidden;

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

  border-radius: 18px;

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

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


.djr-account-drawer__row {
  display: grid;

  grid-template-columns:
    39px
    minmax(0, 1fr);

  align-items: center;
  gap: 12px;

  min-height: 66px;

  padding:
    10px
    14px;
}


.djr-account-drawer__row
+ .djr-account-drawer__row {
  border-top:
    1px solid
    rgba(255,255,255,.09);
}


.djr-account-drawer__icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border:
    1px solid
    rgba(124, 195, 255, .23);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(24, 145, 236, .23),
      rgba(116, 80, 234, .20)
    );

  color: #9bd8ff;

  font-size: 1rem;
  font-weight: 800;
}


.djr-account-drawer__row div {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}


.djr-account-drawer__row small {
  color:
    rgba(220, 232, 249, .72);

  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .11em;
}


.djr-account-drawer__row strong {
  min-width: 0;

  color: #fff;

  font-size: .92rem;
  font-weight: 800;

  text-align: right;

  overflow-wrap: anywhere;
}


@media (max-width: 760px) {

  .djr-account-drawer {
    margin-bottom: 14px;
  }

  .djr-account-drawer__shell {
    padding:
      18px
      16px
      16px;

    border-radius:
      0
      0
      24px
      24px;
  }

  .djr-account-drawer__row {
    min-height: 62px;
    padding:
      9px
      12px;
  }

  .djr-account-drawer__row div {
    gap: 10px;
  }

}




/* ==========================================================
   DJR ACCOUNT DRAWER V3 — FINAL OVERRIDES
   ========================================================== */

/*
 * CRITICAL:
 * Do not change the dimensions/background/padding inherited
 * from djr-staff-portal-status.
 * This remains the same hero pill as before.
 */

.djr-staff-portal-status.djr-account-drawer-trigger {
  display: inline-flex !important;
  align-items: center !important;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;

  flex: 0 0 auto !important;

  cursor: pointer;

  gap: 7px !important;

  -webkit-tap-highlight-color: transparent;
}


.djr-account-drawer-trigger__label {
  display: inline !important;

  white-space: nowrap;
}


.djr-account-drawer-trigger__chevron {
  display: block;

  width: 12px !important;
  height: 12px !important;

  min-width: 12px !important;

  flex: 0 0 12px !important;

  margin: 0 0 0 1px;

  fill: none;
  stroke: currentColor;

  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: .88;

  transition:
    transform .2s ease;
}


.djr-account-drawer-trigger.is-open
.djr-account-drawer-trigger__chevron {
  transform: rotate(180deg);
}


/* Drawer container */

.djr-account-drawer {
  width: 100%;

  margin: 14px 0 20px;

  position: relative;

  z-index: 5;
}


.djr-account-drawer[hidden] {
  display: none !important;
}


.djr-account-drawer__shell {
  width: 100%;

  box-sizing: border-box;

  padding: 17px;

  border:
    1px solid
    rgba(112, 139, 255, .34);

  border-radius: 23px;

  overflow: hidden;

  position: relative;

  color: #fff;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(56, 157, 255, .26),
      transparent 38%
    ),
    linear-gradient(
      140deg,
      #091d38 0%,
      #102d54 53%,
      #34216f 100%
    );

  box-shadow:
    0 18px 45px rgba(13, 29, 61, .18),
    inset 0 1px 0 rgba(255,255,255,.08);
}


.djr-account-drawer__shell::after {
  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  right: -96px;
  top: -112px;

  border:
    25px solid
    rgba(134, 151, 255, .075);

  border-radius: 50%;

  pointer-events: none;
}


/* Header */

.djr-account-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  position: relative;
  z-index: 1;

  margin-bottom: 13px;
}


.djr-account-drawer__eyebrow {
  margin: 0 0 4px !important;

  color: #7fd0ff !important;

  font-size: .65rem !important;
  font-weight: 900 !important;

  letter-spacing: .15em !important;
}


.djr-account-drawer__header h2 {
  margin: 0 !important;

  color: #fff !important;

  font-size: 1.14rem !important;
  line-height: 1.2 !important;
}


.djr-account-drawer__live {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 6px 9px;

  border:
    1px solid
    rgba(59, 220, 164, .30);

  border-radius: 999px;

  background:
    rgba(42, 185, 140, .13);

  color: #ddfff2;

  font-size: .68rem;
  font-weight: 800;

  white-space: nowrap;
}


.djr-account-drawer__live > span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #3ee0a7;

  box-shadow:
    0 0 0 4px
    rgba(62, 224, 167, .11);
}


/* Rows */

.djr-account-drawer__rows {
  display: grid;

  gap: 8px;

  position: relative;
  z-index: 1;
}


.djr-account-drawer__row {
  width: 100%;

  box-sizing: border-box;

  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr);

  align-items: center;

  gap: 11px;

  padding: 11px 12px;

  border:
    1px solid
    rgba(178, 202, 255, .15);

  border-radius: 14px;

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

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04);
}


.djr-account-drawer__icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: #83d1ff;

  background:
    linear-gradient(
      145deg,
      rgba(57, 164, 255, .22),
      rgba(86, 113, 255, .20)
    );
}


.djr-account-drawer__icon--purple {
  color: #cabdff;

  background:
    linear-gradient(
      145deg,
      rgba(91, 93, 255, .27),
      rgba(161, 74, 255, .23)
    );
}


.djr-account-drawer__icon svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.djr-account-drawer__content {
  min-width: 0;
}


.djr-account-drawer__content > small {
  display: block;

  margin: 0 0 2px;

  color:
    rgba(206, 219, 241, .70);

  font-size: .61rem;
  font-weight: 850;

  letter-spacing: .13em;
}


.djr-account-drawer__content > strong {
  display: block;

  color: #fff;

  font-size: .92rem;
  font-weight: 800;

  line-height: 1.25;

  overflow-wrap: anywhere;
}


.djr-account-drawer__online {
  grid-column: 2;

  display: inline-flex;
  align-items: center;

  width: max-content;

  gap: 5px;

  margin-top: 4px;

  color: #9cebd0;

  font-size: .66rem;
  font-weight: 800;
}


.djr-account-drawer__online > span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #3ee0a7;
}


/* Remote Access fifth row */

.djr-account-drawer__row--remote {
  align-items: start;

  background:
    linear-gradient(
      135deg,
      rgba(54, 154, 255, .11),
      rgba(138, 80, 255, .14)
    );
}


.djr-account-drawer__remote {
  display: grid;

  gap: 7px;

  margin-top: 10px;
}


.djr-account-drawer__remote > div {
  display: grid;

  grid-template-columns:
    80px
    minmax(0, 1fr);

  gap: 8px;

  align-items: baseline;
}


.djr-account-drawer__remote span {
  color:
    rgba(207, 220, 242, .64);

  font-size: .65rem;
  font-weight: 700;
}


.djr-account-drawer__remote b,
.djr-account-drawer__remote code {
  min-width: 0;

  padding: 0;

  border: 0;

  background: none;

  color: #fff;

  font-family: inherit;

  font-size: .68rem;
  font-weight: 750;

  text-align: right;

  overflow-wrap: anywhere;
}


/* Keep the complete hero action row intact on iPhone */

@media (max-width: 760px) {

  .djr-staff-portal-hero__actions {
    display: flex !important;

    align-items: stretch !important;

    flex-wrap: nowrap !important;

    gap: 7px !important;

    width: 100% !important;
  }


  .djr-staff-portal-status.djr-account-drawer-trigger {
    flex: 0 1 auto !important;
  }


  .djr-account-drawer__shell {
    padding: 14px;

    border-radius: 20px;
  }


  .djr-account-drawer__row {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    gap: 10px;

    padding: 10px 11px;
  }


  .djr-account-drawer__icon {
    width: 38px;
    height: 38px;
  }

}



/* ==========================================================
   DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   ACCOUNT DRAWER / HERO PILL LOCK

   Canonical visual theme:
   - deep navy
   - electric blue
   - DJR purple
   - pale blue accents
   - white typography

   This block deliberately controls ONLY the Account drawer
   and Account-active trigger.
   ========================================================== */


/* ----------------------------------------------------------
   1. ACCOUNT ACTIVE MUST REMAIN AN ORIGINAL-SCALE HERO PILL
   ---------------------------------------------------------- */

.djr-staff-portal-hero__actions
.djr-staff-portal-status.djr-account-drawer-trigger {
  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  align-self: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;

  overflow: visible !important;

  white-space: nowrap !important;

  cursor: pointer;

  box-sizing: border-box !important;
}


/*
 * Preserve the original green status dot.
 */
.djr-staff-portal-hero__actions
.djr-account-drawer-trigger > span:first-child {
  flex: 0 0 auto !important;
}


/*
 * Account label must behave exactly like the original text.
 */
.djr-account-drawer-trigger__label {
  display: inline !important;

  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 0 !important;

  white-space: nowrap !important;

  margin: 0 !important;
  padding: 0 !important;
}


/*
 * Tiny chevron only.
 * It must never change the pill's height or width dramatically.
 */
.djr-account-drawer-trigger__chevron {
  display: block !important;

  width: 11px !important;
  height: 11px !important;

  min-width: 11px !important;
  max-width: 11px !important;

  flex: 0 0 11px !important;

  margin: 0 0 0 1px !important;
  padding: 0 !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  opacity: .78;

  transition:
    transform .18s ease;
}


.djr-account-drawer-trigger.is-open
.djr-account-drawer-trigger__chevron {
  transform: rotate(180deg);
}


/* ----------------------------------------------------------
   2. DRAWER CONTAINER
   Compact drop-down card — NOT another page.
   ---------------------------------------------------------- */

.djr-account-drawer[hidden] {
  display: none !important;
}


.djr-account-drawer {
  position: relative !important;

  display: block;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin:
    12px
    0
    18px !important;

  padding: 0 !important;

  box-sizing: border-box !important;

  overflow: visible !important;

  z-index: 3;
}


/* ----------------------------------------------------------
   3. PURPLE / BLUE STAFF-THEME DRAWER SHELL
   ---------------------------------------------------------- */

.djr-account-drawer__shell {
  position: relative;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  padding:
    15px
    15px
    14px;

  border:
    1px solid
    rgba(111, 165, 255, .25);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(104, 86, 232, .28) 0,
      rgba(104, 86, 232, 0) 42%
    ),
    linear-gradient(
      135deg,
      #0b213f 0%,
      #102f59 48%,
      #2b206f 100%
    ) !important;

  box-shadow:
    0 16px 38px rgba(8, 22, 48, .18),
    inset 0 1px 0 rgba(255,255,255,.07);

  color: #ffffff;

  overflow: hidden;

  box-sizing: border-box;
}


/* ----------------------------------------------------------
   4. SMALL DRAWER HEADING
   ---------------------------------------------------------- */

.djr-account-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin: 0 0 11px;

  padding:
    1px
    2px
    11px;

  border-bottom:
    1px solid
    rgba(255,255,255,.10);
}


.djr-account-drawer__eyebrow {
  margin: 0 0 2px !important;

  color: #83ccff !important;

  font-size: .62rem !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;

  letter-spacing: .14em !important;
}


.djr-account-drawer__header h2 {
  margin: 0 !important;

  color: #ffffff !important;

  font-size: .98rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}


.djr-account-drawer__live {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  flex: 0 0 auto;

  padding: 6px 9px;

  border:
    1px solid
    rgba(70, 221, 171, .25);

  border-radius: 999px;

  background:
    rgba(18, 151, 122, .15);

  color: #dffff5;

  font-size: .67rem;
  line-height: 1;
  font-weight: 800;
}


.djr-account-drawer__live > span {
  display: block;

  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #43dca8;

  box-shadow:
    0 0 0 4px
    rgba(67,220,168,.11);
}


/* ----------------------------------------------------------
   5. FIVE COMPACT FULL-WIDTH INFORMATION ROWS
   ---------------------------------------------------------- */

.djr-account-drawer__rows {
  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 7px !important;

  width: 100% !important;
  min-width: 0 !important;
}


.djr-account-drawer__row {
  display: grid !important;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto !important;

  align-items: center !important;

  gap: 10px !important;

  width: 100% !important;
  min-width: 0 !important;

  min-height: 51px !important;

  margin: 0 !important;

  padding:
    8px
    10px !important;

  border:
    1px solid
    rgba(162, 200, 255, .13) !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035);

  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   6. LOCK EVERY DRAWER ICON TO A SMALL SIZE
   This fixes the giant-circle failure seen in the video.
   ---------------------------------------------------------- */

.djr-account-drawer__icon {
  display: grid !important;

  place-items: center !important;

  width: 32px !important;
  height: 32px !important;

  min-width: 32px !important;
  max-width: 32px !important;

  min-height: 32px !important;
  max-height: 32px !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(92, 183, 255, .20);

  border-radius: 10px;

  color: #87d1ff;

  background:
    linear-gradient(
      145deg,
      rgba(28, 145, 238, .22),
      rgba(72, 96, 223, .18)
    );
}


.djr-account-drawer__icon--purple {
  color: #d2c7ff;

  border-color:
    rgba(169, 144, 255, .22);

  background:
    linear-gradient(
      145deg,
      rgba(111, 76, 225, .30),
      rgba(70, 87, 209, .18)
    );
}


.djr-account-drawer__icon svg {
  display: block !important;

  width: 18px !important;
  height: 18px !important;

  min-width: 18px !important;
  max-width: 18px !important;

  min-height: 18px !important;
  max-height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


.djr-account-drawer__icon svg circle,
.djr-account-drawer__icon svg rect,
.djr-account-drawer__icon svg path {
  vector-effect:
    non-scaling-stroke;
}


/* ----------------------------------------------------------
   7. ROW TYPOGRAPHY
   ---------------------------------------------------------- */

.djr-account-drawer__content {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
}


.djr-account-drawer__content small {
  display: block !important;

  margin: 0 0 2px !important;

  color: #8fcfff !important;

  font-size: .59rem !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;

  letter-spacing: .105em !important;
}


.djr-account-drawer__content > strong {
  display: block !important;

  margin: 0 !important;

  color: #ffffff !important;

  font-size: .84rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;

  overflow-wrap: anywhere;
}


/* ----------------------------------------------------------
   8. ONLINE BADGE
   ---------------------------------------------------------- */

.djr-account-drawer__online {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 5px 7px;

  border-radius: 999px;

  background:
    rgba(54, 213, 160, .11);

  color: #bff8e3;

  font-size: .59rem;
  line-height: 1;
  font-weight: 800;
}


.djr-account-drawer__online > span {
  width: 6px;
  height: 6px;

  flex: 0 0 6px;

  border-radius: 50%;

  background: #45dca7;
}


/* ----------------------------------------------------------
   9. REMOTE ACCESS — FIFTH ROW
   Compact information, not a giant instruction panel.
   ---------------------------------------------------------- */

.djr-account-drawer__row--remote {
  align-items: start !important;

  min-height: 0 !important;

  padding-top: 10px !important;
  padding-bottom: 10px !important;
}


.djr-account-drawer__remote {
  display: grid;

  grid-template-columns: 1fr;

  gap: 5px;

  margin-top: 6px;

  width: 100%;
}


.djr-account-drawer__remote > div {
  display: grid;

  grid-template-columns:
    88px
    minmax(0, 1fr);

  align-items: baseline;

  gap: 8px;

  width: 100%;
  min-width: 0;
}


.djr-account-drawer__remote span {
  color:
    rgba(211, 229, 255, .65);

  font-size: .61rem;
  line-height: 1.25;
  font-weight: 700;
}


.djr-account-drawer__remote b,
.djr-account-drawer__remote code {
  min-width: 0;

  margin: 0;
  padding: 0;

  color: #ffffff !important;

  background: none !important;

  border: 0 !important;

  font-family: inherit !important;

  font-size: .65rem !important;
  line-height: 1.3 !important;
  font-weight: 750 !important;

  overflow-wrap: anywhere;
}


/* ----------------------------------------------------------
   10. MOBILE — KEEP THE WHOLE DRAWER VIEWABLE AND NEAT
   ---------------------------------------------------------- */

@media (max-width: 760px) {

  .djr-account-drawer {
    margin-top: 10px !important;
    margin-bottom: 14px !important;
  }


  .djr-account-drawer__shell {
    padding:
      13px
      12px
      12px !important;

    border-radius: 18px !important;
  }


  .djr-account-drawer__header {
    margin-bottom: 9px;
    padding-bottom: 9px;
  }


  .djr-account-drawer__row {
    grid-template-columns:
      31px
      minmax(0, 1fr)
      auto !important;

    min-height: 47px !important;

    gap: 9px !important;

    padding:
      7px
      9px !important;

    border-radius: 12px !important;
  }


  .djr-account-drawer__icon {
    width: 29px !important;
    height: 29px !important;

    min-width: 29px !important;
    max-width: 29px !important;

    min-height: 29px !important;
    max-height: 29px !important;
  }


  .djr-account-drawer__icon svg {
    width: 16px !important;
    height: 16px !important;

    min-width: 16px !important;
    max-width: 16px !important;

    min-height: 16px !important;
    max-height: 16px !important;
  }


  .djr-account-drawer__remote > div {
    grid-template-columns:
      74px
      minmax(0, 1fr);
  }

}


/* ==========================================================
   END DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   ========================================================== */



/* ==========================================================
   DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   HERO ACTION ROW — FINAL MOBILE LOCK
   Reference: approved Tess staff-profile visual
   ========================================================== */


/*
 * The four controls must behave as one deliberate toolbar:
 *
 * Account | Alerts | Bulletins | ...
 *
 * Never allow the first two controls to collapse into each
 * other or force their labels outside their own pill.
 */
@media (max-width: 760px) {

  .djr-staff-portal-hero__actions {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.04fr)
      minmax(0, 0.95fr)
      minmax(0, 1.18fr)
      44px !important;

    align-items: center !important;
    gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-top: 18px !important;
  }


  /*
   * ACCOUNT
   * Preserve the same original teal/glass pill styling.
   */
  .djr-staff-portal-status.djr-account-drawer-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 11px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 7px !important;

    white-space: nowrap !important;
    overflow: hidden !important;

    box-sizing: border-box !important;

    cursor: pointer;
  }


  /*
   * Existing first span is the live/green status dot.
   */
  .djr-staff-portal-status.djr-account-drawer-trigger
  > span:first-child {
    width: 8px !important;
    height: 8px !important;

    min-width: 8px !important;
    flex: 0 0 8px !important;

    margin: 0 !important;
  }


  .djr-account-drawer-trigger__label {
    display: block !important;

    min-width: 0 !important;
    flex: 0 1 auto !important;

    font-size: 0.82rem !important;
    line-height: 1 !important;
    font-weight: 750 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }


  /*
   * Tiny dropdown symbol only.
   * It must never enlarge the Account pill.
   */
  .djr-account-drawer-trigger__chevron {
    width: 11px !important;
    height: 11px !important;

    min-width: 11px !important;
    flex: 0 0 11px !important;

    margin-left: auto !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    opacity: 0.75 !important;

    transition: transform 0.18s ease !important;
  }


  .djr-account-drawer-trigger.is-open
  .djr-account-drawer-trigger__chevron {
    transform: rotate(180deg) !important;
  }


  /*
   * ALERTS
   */
  .djr-staff-alert-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    white-space: nowrap !important;
    overflow: hidden !important;

    font-size: 0.82rem !important;
    line-height: 1 !important;
  }


  .djr-staff-alert-button__dot {
    width: 8px !important;
    height: 8px !important;

    min-width: 8px !important;
    flex: 0 0 8px !important;
  }


  /*
   * BULLETINS
   */
  .djr-staff-bulletin-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 11px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    white-space: nowrap !important;
    overflow: hidden !important;

    font-size: 0.82rem !important;
    line-height: 1 !important;
  }


  .djr-staff-bulletin-button__icon {
    width: 16px !important;
    height: 16px !important;

    min-width: 16px !important;
    flex: 0 0 16px !important;
  }


  .djr-staff-bulletin-button__icon svg {
    width: 16px !important;
    height: 16px !important;
  }


  /*
   * THREE-DOT CONTROL
   */
  .djr-staff-hero-menu {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
  }


  .djr-staff-hero-menu__button {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

}


/*
 * Slightly narrower phones get a little extra breathing room
 * without changing the approved visual proportions.
 */
@media (max-width: 390px) {

  .djr-staff-portal-hero__actions {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 0.92fr)
      minmax(0, 1.14fr)
      42px !important;

    gap: 6px !important;
  }

  .djr-staff-portal-status.djr-account-drawer-trigger,
  .djr-staff-alert-button,
  .djr-staff-bulletin-button {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .djr-account-drawer-trigger__label,
  .djr-staff-alert-button,
  .djr-staff-bulletin-button {
    font-size: 0.78rem !important;
  }

  .djr-staff-hero-menu,
  .djr-staff-hero-menu__button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

}


/* ==========================================================
   END DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   HERO ACTION ROW — FINAL MOBILE LOCK
   ========================================================== */


/* ==========================================================
   DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   HERO ACTION ROW — HARD LAYOUT LOCK V2

   This block is intentionally authoritative.

   Goal:
   [people] Account
   [bell]   Alerts
   [chat]   Bulletins
   [...]

   No compression.
   No overlapping labels.
   No duplicated status dot.
   ========================================================== */


/* ----------------------------------------------------------
   ACTION ROW
   ---------------------------------------------------------- */

.djr-staff-portal-hero__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 100% !important;

  gap: 8px !important;

  margin-top: 18px !important;

  padding: 0 !important;

  overflow: visible !important;
}


/* ----------------------------------------------------------
   ABSOLUTELY DO NOT ALLOW ANY OF THE FOUR CONTROLS TO
   COLLAPSE INTERNALLY.
   ---------------------------------------------------------- */

.djr-staff-portal-hero__actions >
.djr-account-drawer-trigger,

.djr-staff-portal-hero__actions >
.djr-staff-alert-button,

.djr-staff-portal-hero__actions >
.djr-staff-bulletin-button,

.djr-staff-portal-hero__actions >
.djr-staff-hero-menu {

  flex-shrink: 0 !important;

  min-width: 0 !important;

  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   ACCOUNT + ALERTS
   These two share the compact utility-pill proportions.
   ---------------------------------------------------------- */

.djr-staff-portal-hero__actions
.djr-account-drawer-trigger,

.djr-staff-portal-hero__actions
.djr-staff-alert-button {

  flex: 0 0 auto !important;

  width: auto !important;

  min-width: 108px !important;
  max-width: none !important;

  height: 44px !important;
  min-height: 44px !important;

  padding: 0 13px !important;

  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;

  white-space: nowrap !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  overflow: hidden !important;

  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   ACCOUNT ICON
   ---------------------------------------------------------- */

.djr-account-drawer-trigger > span:first-child {
  /*
   * Neutralise the old generic status-dot rule which used to
   * target the first span inside this control.
   */
  width: auto !important;
  height: auto !important;

  min-width: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  flex: 0 0 auto !important;
}


.djr-account-drawer-trigger__icon {
  width: 18px !important;
  height: 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #48e6ba !important;

  flex: 0 0 18px !important;
}


.djr-account-drawer-trigger__icon svg {
  width: 18px !important;
  height: 18px !important;

  display: block !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


/* Remove any accidental generated dot/icon. */

.djr-account-drawer-trigger::before,
.djr-account-drawer-trigger__icon::before,
.djr-account-drawer-trigger__icon::after {
  content: none !important;
  display: none !important;
}


/* ----------------------------------------------------------
   ACCOUNT LABEL
   ---------------------------------------------------------- */

.djr-account-drawer-trigger__label {
  display: inline-block !important;

  width: auto !important;
  min-width: 0 !important;

  white-space: nowrap !important;

  overflow: visible !important;
}


/* ----------------------------------------------------------
   SMALL ACCOUNT CHEVRON
   ---------------------------------------------------------- */

.djr-account-drawer-trigger__chevron {
  width: 12px !important;
  height: 12px !important;

  flex: 0 0 12px !important;

  margin-left: -1px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


/* ----------------------------------------------------------
   ALERTS
   ---------------------------------------------------------- */

.djr-staff-alert-button {
  white-space: nowrap !important;
}


/*
 * The notification state is already communicated by the icon/
 * colour. Keep the visual toolbar label compact as "Alerts".
 */

.djr-staff-alert-button [data-staff-push-status] {
  font-size: 0 !important;

  white-space: nowrap !important;
}


.djr-staff-alert-button [data-staff-push-status]::after {
  content: "Alerts";

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}


/* ----------------------------------------------------------
   BULLETINS
   ---------------------------------------------------------- */

.djr-staff-portal-hero__actions
.djr-staff-bulletin-button {

  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 126px !important;
  max-width: none !important;

  height: 44px !important;
  min-height: 44px !important;

  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  white-space: nowrap !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   THREE-DOT MENU
   ---------------------------------------------------------- */

.djr-staff-portal-hero__actions
.djr-staff-hero-menu {

  flex: 0 0 44px !important;

  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;

  height: 44px !important;

  margin: 0 !important;
}


.djr-staff-portal-hero__actions
.djr-staff-hero-menu__button {

  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;

  height: 44px !important;
  min-height: 44px !important;

  padding: 0 !important;

  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   MOBILE FIT
   This is the important part.

   On narrow phones we scale the three text pills slightly,
   rather than allowing flexbox to crush one into another.
   ---------------------------------------------------------- */

@media (max-width: 520px) {

  .djr-staff-portal-hero__actions {
    gap: 6px !important;
  }


  .djr-staff-portal-hero__actions
  .djr-account-drawer-trigger,

  .djr-staff-portal-hero__actions
  .djr-staff-alert-button {

    min-width: 0 !important;

    height: 42px !important;
    min-height: 42px !important;

    padding-left: 10px !important;
    padding-right: 10px !important;

    gap: 6px !important;

    font-size: 13px !important;
  }


  .djr-staff-alert-button
  [data-staff-push-status]::after {

    font-size: 13px !important;
  }


  .djr-staff-portal-hero__actions
  .djr-staff-bulletin-button {

    min-width: 0 !important;

    height: 42px !important;
    min-height: 42px !important;

    padding-left: 11px !important;
    padding-right: 11px !important;

    gap: 6px !important;

    font-size: 13px !important;
  }


  .djr-staff-portal-hero__actions
  .djr-staff-hero-menu,

  .djr-staff-portal-hero__actions
  .djr-staff-hero-menu__button {

    flex-basis: 42px !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 42px !important;
    min-height: 42px !important;
  }

}


/* ----------------------------------------------------------
   VERY NARROW VIEWPORTS
   Preserve all four buttons in one row without overlap.
   ---------------------------------------------------------- */

@media (max-width: 390px) {

  .djr-staff-portal-hero__actions {
    gap: 5px !important;
  }


  .djr-staff-portal-hero__actions
  .djr-account-drawer-trigger,

  .djr-staff-portal-hero__actions
  .djr-staff-alert-button {

    padding-left: 8px !important;
    padding-right: 8px !important;

    gap: 5px !important;

    font-size: 12px !important;
  }


  .djr-staff-alert-button
  [data-staff-push-status]::after {

    font-size: 12px !important;
  }


  .djr-staff-portal-hero__actions
  .djr-staff-bulletin-button {

    padding-left: 9px !important;
    padding-right: 9px !important;

    gap: 5px !important;

    font-size: 12px !important;
  }


  .djr-account-drawer-trigger__icon {
    width: 16px !important;
    height: 16px !important;

    flex-basis: 16px !important;
  }


  .djr-account-drawer-trigger__icon svg {
    width: 16px !important;
    height: 16px !important;
  }

}


/* ==========================================================
   END DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   HERO ACTION ROW — HARD LAYOUT LOCK V2
   ========================================================== */


/* ==========================================================
   DJR_STAFF_PURPLE_GRADIENT_THEME_V1__HERO_CARD_V8

   CANONICAL STAFF HERO GEOMETRY

   RULE:
   Hero/card layout belongs HERE in staff-ui.css.
   complete.html supplies markup only.

   Owns:
   - profile avatar / identity columns
   - staff title / name / role / intro spacing
   - Account / Alerts / Bulletins / More row
   - mobile containment

   DO NOT add competing hero geometry elsewhere.
   ========================================================== */


/* ==========================================================
   HERO CARD
   ========================================================== */

body .djr-staff-portal-hero {
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  width: 100% !important;
  max-width: 100% !important;

  gap: 0 !important;

  overflow: visible !important;
}


/* ==========================================================
   IDENTITY
   Avatar = dedicated left column.
   ALL text = dedicated right column.
   ========================================================== */

body .djr-staff-portal-hero
.djr-staff-portal-identity {

  display: grid !important;

  grid-template-columns:
    78px
    minmax(0, 1fr) !important;

  grid-template-areas:
    "avatar copy" !important;

  column-gap: 24px !important;

  align-items: start !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


body .djr-staff-portal-hero
.djr-staff-portal-avatar {

  grid-area: avatar !important;

  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;

  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;

  margin: 0 !important;

  align-self: start !important;
}


body .djr-staff-portal-hero
.djr-staff-portal-identity__copy {

  grid-area: copy !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: flex-start !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 3px 0 0 !important;
}


/* Staff kicker */

body .djr-staff-portal-hero
.djr-staff-portal-identity__copy
.djr-member-profile-kicker {

  display: block !important;

  width: 100% !important;

  margin: 0 0 7px !important;
  padding: 0 !important;

  line-height: 1 !important;
}


/* Staff name */

body .djr-staff-portal-hero
.djr-staff-portal-name,

body .djr-staff-portal-hero
.djr-staff-portal-identity__copy > h1 {

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 0 8px !important;
  padding: 0 !important;

  font-size:
    clamp(1.72rem, 6.2vw, 2.25rem) !important;

  line-height: 1.03 !important;

  text-align: left !important;
}


/* Job title + department */

body .djr-staff-portal-hero
.djr-staff-portal-role {

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 0 17px !important;
  padding: 0 !important;

  font-size: .92rem !important;
  line-height: 1.25 !important;

  text-align: left !important;
}


/* Intro text */

body .djr-staff-portal-hero
.djr-staff-portal-welcome {

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 440px !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: .90rem !important;
  line-height: 1.48 !important;

  text-align: left !important;
}


/* ==========================================================
   ACTION TOOLBAR
   Account | Alerts | Bulletins | More

   The important part:
   first 3 controls SHARE the available width.
   More has its own protected fixed column.
   ========================================================== */

body .djr-staff-portal-hero
.djr-staff-portal-hero__actions {

  position: relative !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, .95fr)
    minmax(0, .90fr)
    minmax(0, 1.15fr)
    38px !important;

  column-gap: 6px !important;

  align-items: center !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 24px 0 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  overflow: visible !important;

  z-index: 60 !important;
}


/* Kill every historical flex width. */

body .djr-staff-portal-hero
.djr-staff-portal-hero__actions
> * {

  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  flex: none !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;

  box-sizing: border-box !important;

  transform: none !important;
}


/* ==========================================================
   ACCOUNT
   ========================================================== */

body .djr-staff-portal-hero
.djr-staff-portal-hero__actions
> .djr-account-pill {

  display: flex !important;
  flex-direction: row !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  padding: 0 6px !important;

  border-radius: 999px !important;

  font-size: .72rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  white-space: nowrap !important;

  overflow: hidden !important;
}


body .djr-staff-portal-hero
.djr-account-pill::before,

body .djr-staff-portal-hero
.djr-account-pill::after {

  content: none !important;
  display: none !important;
}


body .djr-staff-portal-hero
.djr-account-drawer-trigger__icon {

  display: inline-flex !important;

  flex: 0 0 16px !important;

  align-items: center !important;
  justify-content: center !important;

  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;

  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #55e5c0 !important;

  border: 0 !important;
  background: transparent !important;
}


body .djr-staff-portal-hero
.djr-account-drawer-trigger__icon::before,

body .djr-staff-portal-hero
.djr-account-drawer-trigger__icon::after {

  content: none !important;
  display: none !important;
}


body .djr-staff-portal-hero
.djr-account-drawer-trigger__icon svg {

  display: block !important;

  width: 16px !important;
  height: 16px !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


body .djr-staff-portal-hero
.djr-account-drawer-trigger__label {

  flex: 0 1 auto !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  font: inherit !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}


body .djr-staff-portal-hero
.djr-account-drawer-trigger__chevron {

  display: block !important;

  flex: 0 0 7px !important;

  width: 7px !important;
  min-width: 7px !important;
  max-width: 7px !important;

  height: 7px !important;

  margin: 0 !important;
}


/* ==========================================================
   ALERTS
   ========================================================== */

body .djr-staff-portal-hero
.djr-staff-portal-hero__actions
> .djr-staff-alert-button {

  display: flex !important;
  flex-direction: row !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  padding: 0 6px !important;

  border-radius: 999px !important;

  font-size: .72rem !important;
  line-height: 1 !important;

  white-space: nowrap !important;

  overflow: hidden !important;
}


body .djr-staff-portal-hero
.djr-staff-alert-button__dot {

  flex: 0 0 8px !important;

  width: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;

  height: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;
}


/* ==========================================================
   BULLETINS
   ========================================================== */

body .djr-staff-portal-hero
.djr-staff-portal-hero__actions
> .djr-staff-bulletin-button {

  display: flex !important;
  flex-direction: row !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;

  padding: 0 7px !important;

  border-radius: 999px !important;

  font-size: .72rem !important;
  line-height: 1 !important;

  white-space: nowrap !important;

  overflow: hidden !important;
}


body .djr-staff-portal-hero
.djr-staff-bulletin-button__icon {

  display: inline-flex !important;

  flex: 0 0 15px !important;

  width: 15px !important;
  min-width: 15px !important;

  height: 15px !important;

  align-items: center !important;
  justify-content: center !important;
}


/* ==========================================================
   MORE
   Protected slot.
   Cannot be squeezed or pushed through the card edge.
   ========================================================== */

body .djr-staff-portal-hero
.djr-staff-portal-hero__actions
> .djr-staff-hero-menu {

  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  justify-self: end !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: visible !important;

  z-index: 70 !important;
}


body .djr-staff-portal-hero
.djr-staff-hero-menu__button {

  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 999px !important;

  transform: none !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

  body .djr-staff-portal-hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-identity {

    grid-template-columns:
      74px
      minmax(0, 1fr) !important;

    column-gap: 24px !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-avatar {

    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;

    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-name,

  body .djr-staff-portal-hero
  .djr-staff-portal-identity__copy > h1 {

    font-size:
      clamp(1.65rem, 6.5vw, 2rem) !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-welcome {

    max-width: 100% !important;

    font-size: .89rem !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions {

    /*
     * Approximately:
     * Account   28%
     * Alerts    24%
     * Bulletins 35%
     * More      protected 36px
     */

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, .88fr)
      minmax(0, 1.22fr)
      36px !important;

    column-gap: 5px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin-top: 22px !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions
  > * {

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions
  > .djr-account-pill,

  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions
  > .djr-staff-alert-button,

  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions
  > .djr-staff-bulletin-button {

    font-size: .69rem !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions
  > .djr-staff-hero-menu,

  body .djr-staff-portal-hero
  .djr-staff-hero-menu__button {

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

}


/* ==========================================================
   NARROW IPHONE
   ========================================================== */

@media (max-width: 390px) {

  body .djr-staff-portal-hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-identity {

    grid-template-columns:
      70px
      minmax(0, 1fr) !important;

    column-gap: 21px !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-avatar {

    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;

    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, .86fr)
      minmax(0, 1.20fr)
      34px !important;

    column-gap: 4px !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions
  > .djr-account-pill,

  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions
  > .djr-staff-alert-button,

  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions
  > .djr-staff-bulletin-button {

    padding-left: 5px !important;
    padding-right: 5px !important;

    font-size: .66rem !important;
  }


  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions
  > .djr-staff-hero-menu,

  body .djr-staff-portal-hero
  .djr-staff-hero-menu__button {

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

}


/* END DJR_STAFF_PURPLE_GRADIENT_THEME_V1__HERO_CARD_V8 */

/* ==========================================================
   DJR_STAFF_MODULE_WHEEL_SINGLE_OWNER_V16

   One authoritative module-library implementation.

   Behaviour:
   - existing purple + opens library
   - same purple + rotates into X
   - only that control closes library
   - page is frozen while open
   - wheel alone accepts vertical scrolling
   - active module lives at centre
   - adjacent modules fade above/below
   - title + overview live LEFT of icon
   - icon opens compact Add/Remove ticket
   ========================================================== */


.djr-staff-module-area {
  position: relative !important;
}


/* ==========================================================
   PLUS -> X
   ========================================================== */

[data-djr-module-drawer-open] svg {
  transition:
    transform .18s ease !important;

  transform-origin:
    50% 50% !important;
}

[data-djr-module-drawer-open][aria-expanded="true"] svg {
  transform:
    rotate(45deg) !important;
}


/* ==========================================================
   DRAWER POSITIONING SHELL
   ========================================================== */

[data-djr-module-drawer] {
  position: absolute !important;

  left: auto !important;
  right: 0 !important;

  width: 330px !important;
  max-width: calc(100vw - 34px) !important;

  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;

  pointer-events: none !important;

  z-index: 90 !important;
}

[data-djr-module-drawer][hidden] {
  display: none !important;
}


/*
 * Tree physically lives inside the historical sheet,
 * therefore the sheet remains only as a transparent shell.
 */

[data-djr-module-drawer]
.djr-module-drawer__sheet {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;

  pointer-events: none !important;
}


/* Hide all obsolete drawer chrome. */

[data-djr-module-drawer]
.djr-module-drawer__backdrop,

[data-djr-module-drawer]
.djr-module-drawer__handle,

[data-djr-module-drawer]
.djr-module-drawer__header,

[data-djr-module-drawer]
.djr-module-drawer__intro,

[data-djr-module-drawer]
[data-djr-module-preview] {
  display: none !important;
}


[data-djr-module-drawer]
.djr-module-library {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  pointer-events: none !important;
}


/* ==========================================================
   VERTICAL WHEEL
   ========================================================== */

[data-djr-module-tree] {
  position: absolute !important;
  inset: 0 !important;

  box-sizing: border-box !important;

  display: block !important;

  width: 100% !important;
  height: 180px !important;

  margin: 0 !important;

  /*
   * This creates real scroll travel even when only one
   * module currently exists.
   */
  padding:
    78px
    0
    78px
    0 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  scrollbar-width: none !important;

  -webkit-overflow-scrolling: touch !important;

  overscroll-behavior-y: contain !important;

  scroll-snap-type: y mandatory !important;

  touch-action: pan-y !important;

  pointer-events: auto !important;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.20) 9%,
      #000 29%,
      #000 71%,
      rgba(0,0,0,.20) 91%,
      transparent 100%
    ) !important;

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.20) 9%,
      #000 29%,
      #000 71%,
      rgba(0,0,0,.20) 91%,
      transparent 100%
    ) !important;
}


[data-djr-module-tree]::-webkit-scrollbar {
  display: none !important;
}


/* ==========================================================
   MODULE ROW
   ========================================================== */

[data-djr-module-select] {
  position: relative !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    54px !important;

  align-items: center !important;

  column-gap: 10px !important;

  box-sizing: border-box !important;

  width: 282px !important;
  max-width: 282px !important;

  height: 66px !important;
  min-height: 66px !important;
  max-height: 66px !important;

  margin:
    0
    0
    8px
    auto !important;

  padding:
    6px
    0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  overflow: visible !important;

  scroll-snap-align: center !important;
  scroll-snap-stop: always !important;

  transform-origin: right center !important;

  transition:
    opacity .15s ease,
    transform .15s ease,
    filter .15s ease !important;

  color: #111827 !important;

  text-align: left !important;

  cursor: default !important;
}


/* ==========================================================
   LEFT TITLE + OVERVIEW
   ========================================================== */

.djr-module-wheel-copy-v15 {
  grid-column: 1 !important;

  display: grid !important;

  grid-template-rows:
    auto
    auto !important;

  row-gap: 2px !important;

  align-self: center !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  text-align: left !important;

  pointer-events: none !important;
}


[data-djr-module-select]
.djr-module-tree__label {
  position: static !important;

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  white-space: nowrap !important;

  text-overflow: ellipsis !important;

  font-family: inherit !important;

  font-size: 14px !important;
  line-height: 17px !important;

  font-weight: 760 !important;

  letter-spacing: -.014em !important;

  color: #111827 !important;

  text-align: left !important;

  opacity: 1 !important;

  transform: none !important;
}


.djr-module-wheel-overview-v15 {
  display: -webkit-box !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  font-family: inherit !important;

  font-size: 10px !important;
  line-height: 12px !important;

  font-weight: 500 !important;

  color: rgba(71,85,105,.60) !important;

  text-align: left !important;

  pointer-events: none !important;
}


/* ==========================================================
   CIRCULAR ICON
   ========================================================== */

[data-djr-module-select]
.djr-module-tree__icon {
  grid-column: 2 !important;

  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: grid !important;
  place-items: center !important;

  align-self: center !important;
  justify-self: end !important;

  box-sizing: border-box !important;

  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;

  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  margin: 0 !important;
  padding: 0 !important;

  border:
    2px solid
    rgba(255,255,255,.92) !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      145deg,
      #8b5cf6,
      #6535e6
    ) !important;

  box-shadow:
    0 7px 18px
    rgba(76,45,180,.22),
    inset 0 1px 0
    rgba(255,255,255,.30) !important;

  transform: none !important;

  overflow: hidden !important;

  cursor: pointer !important;

  pointer-events: auto !important;
}


[data-djr-module-select]
.djr-module-tree__icon > svg {
  position: static !important;

  display: block !important;

  width: 25px !important;
  min-width: 25px !important;
  max-width: 25px !important;

  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  fill: none !important;

  stroke: #fff !important;
  stroke-width: 2 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  overflow: visible !important;

  pointer-events: none !important;
}


[data-djr-module-select]
.djr-module-tree__letter {
  display: grid !important;

  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #fff !important;

  font-size: 18px !important;
  line-height: 1 !important;

  font-weight: 800 !important;

  pointer-events: none !important;
}


/* ==========================================================
   WHEEL STATES
   ========================================================== */

[data-djr-module-select].djr-module-wheel-v16-active {
  opacity: 1 !important;

  filter: none !important;

  transform: scale(1) !important;

  z-index: 5 !important;
}


[data-djr-module-select].djr-module-wheel-v16-active
.djr-module-tree__icon {
  transform: scale(1.025) !important;
}


[data-djr-module-select].djr-module-wheel-v16-near {
  opacity: .48 !important;

  filter: saturate(.72) !important;

  transform: scale(.92) !important;

  z-index: 3 !important;
}


[data-djr-module-select]:not(.djr-module-wheel-v16-active):not(.djr-module-wheel-v16-near) {
  opacity: .16 !important;

  filter: saturate(.45) !important;

  transform: scale(.86) !important;

  z-index: 1 !important;
}


/* ==========================================================
   ACTION TICKET
   ========================================================== */

.djr-module-ticket-v16 {
  position: absolute !important;

  display: grid !important;

  grid-template-columns:
    27px
    minmax(0,1fr) !important;

  align-items: center !important;

  column-gap: 7px !important;

  min-width: 112px !important;
  max-width: 160px !important;

  box-sizing: border-box !important;

  padding: 6px 8px !important;

  border:
    1px solid
    rgba(203,213,225,.88) !important;

  border-radius: 12px !important;

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

  box-shadow:
    0 8px 24px
    rgba(15,23,42,.13) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  z-index: 160 !important;

  pointer-events: auto !important;
}


.djr-module-ticket-v16[hidden] {
  display: none !important;
}


.djr-module-ticket-v16__glyph {
  display: grid !important;

  place-items: center !important;

  width: 27px !important;
  height: 27px !important;

  border-radius: 8px !important;

  background:
    rgba(99,102,241,.10) !important;

  color: #5b45e8 !important;

  font-size: 16px !important;
  line-height: 1 !important;

  font-weight: 800 !important;
}


.djr-module-ticket-v16--remove
.djr-module-ticket-v16__glyph {
  background:
    rgba(239,68,68,.09) !important;

  color: #dc2626 !important;
}


.djr-module-ticket-v16__copy {
  min-width: 0 !important;

  display: grid !important;

  row-gap: 1px !important;
}


.djr-module-ticket-v16__name {
  overflow: hidden !important;

  white-space: nowrap !important;

  text-overflow: ellipsis !important;

  font-size: 9px !important;
  line-height: 11px !important;

  font-weight: 650 !important;

  color: #64748b !important;
}


.djr-module-ticket-v16__action {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  font-family: inherit !important;

  font-size: 11px !important;
  line-height: 13px !important;

  font-weight: 760 !important;

  text-align: left !important;

  color: #4f46e5 !important;

  cursor: pointer !important;
}


.djr-module-ticket-v16--remove
.djr-module-ticket-v16__action {
  color: #dc2626 !important;
}


.djr-module-ticket-v16--required
.djr-module-ticket-v16__action {
  color: #64748b !important;

  cursor: default !important;
}


/* ==========================================================
   SMALL IPHONE WIDTH
   ========================================================== */

@media (max-width: 430px) {

  [data-djr-module-drawer] {
    width: 302px !important;
  }


  [data-djr-module-select] {
    width: 260px !important;
    max-width: 260px !important;

    grid-template-columns:
      minmax(0,1fr)
      52px !important;

    column-gap: 8px !important;
  }


  [data-djr-module-select]
  .djr-module-tree__icon {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

}


/* END DJR_STAFF_MODULE_WHEEL_SINGLE_OWNER_V16 */


/* ================================================================
   DJR_MODULE_CONTROL_VISUAL_RECOVERY_FINAL
   Restored from existing project backup:
   staff-ui.css.bak-module-wheel-pre-v15-20260809-022949

   Presentation only.
   V16 remains the sole behavioural owner.
   ================================================================ */

.djr-staff-module-add {
  position: relative !important;

  z-index: 120 !important;

  display: grid !important;
  place-items: center !important;

  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;

  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  color: #6d43ee !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

.djr-staff-module-add svg {
  display: block !important;

  width: 27px !important;
  height: 27px !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;

  transition:
    transform .18s ease !important;
}


/*
 * V16 remains authoritative for + -> X.
 */
.djr-staff-module-add[aria-expanded="true"] svg,
[data-djr-module-drawer-open][aria-expanded="true"] svg {
  transform: rotate(45deg) !important;
}


/*
 * Make absolutely certain the compact wheel is not clipped by
 * historical module-area rules.
 */
.djr-staff-module-area {
  overflow: visible !important;
}

[data-djr-staff-modules] {
  overflow: visible !important;
}


/*
 * Closed = genuinely absent.
 */
[data-djr-module-drawer][hidden] {
  display: none !important;
}


/*
 * Open V16 shell = explicitly visible.
 */
[data-djr-module-drawer]:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}


[data-djr-module-drawer]:not([hidden])
.djr-module-drawer__sheet,

[data-djr-module-drawer]:not([hidden])
.djr-module-library {
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}


[data-djr-module-drawer]:not([hidden])
[data-djr-module-tree] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;

  touch-action: pan-y !important;
  pointer-events: auto !important;
}


/*
 * Old drawer chrome must never return.
 */
[data-djr-module-drawer]
.djr-module-drawer__backdrop,

[data-djr-module-drawer]
.djr-module-drawer__handle,

[data-djr-module-drawer]
.djr-module-drawer__header,

[data-djr-module-drawer]
.djr-module-drawer__intro,

[data-djr-module-drawer]
[data-djr-module-preview] {
  display: none !important;
}


/* END DJR_MODULE_CONTROL_VISUAL_RECOVERY_FINAL */


/* DJR_MODULE_MENU_V17_OPEN_STATE */

/*
 * V17 deliberately does NOT position:fixed the page.
 * This prevents Safari/PWA restoration from trapping the
 * entire staff portal in a non-scrollable state.
 */

html.djr-module-wheel-v17-open,
body.djr-module-wheel-v17-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}


/*
 * The Modules area remains the menu positioning origin.
 */

.djr-staff-module-area,
[data-djr-staff-modules] {
  position: relative !important;
  overflow: visible !important;
}


/*
 * Compact floating wheel.
 */

[data-djr-module-drawer]:not([hidden]) {
  display: block !important;

  position: absolute !important;

  right: 0 !important;
  left: auto !important;

  width: 330px !important;
  max-width: calc(100vw - 34px) !important;

  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;

  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none !important;

  z-index: 500 !important;
}


[data-djr-module-drawer]:not([hidden])
.djr-module-drawer__sheet,

[data-djr-module-drawer]:not([hidden])
.djr-module-library {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none !important;
}


/*
 * Only the actual wheel accepts interaction.
 */

[data-djr-module-drawer]:not([hidden])
[data-djr-module-tree] {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 190px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;

  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;

  pointer-events: auto !important;

  visibility: visible !important;
  opacity: 1 !important;
}


/*
 * Preserve the original purple +.
 * aria-expanded turns the same icon into X.
 */

.djr-staff-module-add {
  position: relative !important;

  display: grid !important;
  place-items: center !important;

  width: 34px !important;
  height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #6d43ee !important;

  z-index: 520 !important;
}


.djr-staff-module-add svg {
  display: block !important;

  width: 27px !important;
  height: 27px !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;

  transition: transform .18s ease !important;
}


.djr-staff-module-add[aria-expanded="true"] svg {
  transform: rotate(45deg) !important;
}


/*
 * Historical full drawer chrome stays dead.
 */

[data-djr-module-drawer]
.djr-module-drawer__backdrop,

[data-djr-module-drawer]
.djr-module-drawer__handle,

[data-djr-module-drawer]
.djr-module-drawer__header,

[data-djr-module-drawer]
.djr-module-drawer__intro,

[data-djr-module-drawer]
[data-djr-module-preview] {
  display: none !important;
}


/*
 * Closed really means closed.
 */

[data-djr-module-drawer][hidden] {
  display: none !important;
}


/*
 * Wheel can be swiped while the rest of the page is held.
 */

body.djr-module-wheel-v17-open
[data-djr-module-tree] {
  touch-action: pan-y !important;
}


/* END DJR_MODULE_MENU_V17_OPEN_STATE */


/* DJR_MODULE_MENU_FINAL_VISIBLE_START */

[data-djr-module-drawer] {
  z-index: 14000 !important;
}

[data-djr-module-drawer]:not([hidden]),
[data-djr-module-drawer].is-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

[data-djr-module-drawer].is-open
.djr-module-drawer__sheet,

[data-djr-module-drawer].is-open
.djr-module-library,

[data-djr-module-drawer].is-open
[data-djr-module-tree] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

[data-djr-module-drawer].is-open
.djr-module-drawer__sheet,

[data-djr-module-drawer].is-open
.djr-module-library {
  pointer-events: none !important;
}

[data-djr-module-drawer].is-open
[data-djr-module-tree] {
  pointer-events: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: pan-y !important;
}

.djr-staff-module-area,
[data-djr-staff-modules] {
  overflow: visible !important;
}

/* DJR_MODULE_MENU_FINAL_VISIBLE_END */


/* DJR_MODULE_TICKET_V24_START */

/*
 * DJR_STAFF_PURPLE_GRADIENT_THEME_V1
 * Module ticket + background focus controller.
 */

.djr-module-ticket-v16 {
  position: fixed !important;
  z-index: 14500 !important;
}

body.djr-module-drawer-open
.djr-staff-module-grid {
  filter:
    blur(5px)
    saturate(.72) !important;

  opacity: .42 !important;

  transform:
    scale(.985) !important;

  transition:
    filter .18s ease,
    opacity .18s ease,
    transform .18s ease !important;

  pointer-events: none !important;
}

body:not(.djr-module-drawer-open)
.djr-staff-module-grid {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

[data-djr-module-tree] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

[data-djr-module-tree]::before,
[data-djr-module-tree]::after {
  content: "";
  display: block;
  min-height: 34px;
}

/* DJR_MODULE_TICKET_V24_END */

/* DJR_MODULE_TICKET_PROOF_V26_START */

/*
 * Diagnostic only.
 * DJR_STAFF_PURPLE_GRADIENT_THEME_V1
 *
 * When JS successfully calls openTicket(), force the existing
 * management ticket into an impossible-to-miss viewport position.
 */

.djr-module-ticket-v16.djr-module-ticket-v26-open {
  position: fixed !important;

  left: 50% !important;
  top: 42% !important;
  right: auto !important;
  bottom: auto !important;

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

  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;

  min-width: 150px !important;

  pointer-events: auto !important;

  z-index: 2147483647 !important;

  outline:
    3px solid rgba(109,67,238,.28) !important;

  box-shadow:
    0 16px 46px rgba(15,23,42,.30) !important;
}

.djr-module-ticket-v16.djr-module-ticket-v26-open[hidden] {
  display: none !important;
}

/* DJR_MODULE_TICKET_PROOF_V26_END */


/* DJR_MODULE_TOP_HIT_V30_START */

/*
 * Keep the complete module interaction surface above the
 * hero while the library is open, including at scrollY=0.
 */

body.djr-module-drawer-open
.djr-staff-module-area {
  position: relative !important;
  z-index: 14000 !important;
  isolation: isolate !important;
}

body.djr-module-drawer-open
[data-djr-module-drawer] {
  z-index: 14010 !important;
}

body.djr-module-drawer-open
[data-djr-module-tree] {
  z-index: 14020 !important;
  pointer-events: auto !important;
}

body.djr-module-drawer-open
.djr-module-tree__item,
body.djr-module-drawer-open
.djr-module-tree__icon,
body.djr-module-drawer-open
[data-djr-module-icon-shell] {
  position: relative !important;
  z-index: 14030 !important;
  pointer-events: auto !important;
}

.djr-module-ticket-v16 {
  z-index: 14500 !important;
}

/* DJR_MODULE_TOP_HIT_V30_END */


/* DJR_MODULE_MANAGEMENT_BAR_V29_START */

.djr-module-ticket-v16,
.djr-module-ticket-v26-open {
  display: none !important;
}


.djr-module-manage-v29[hidden] {
  display: none !important;
}


.djr-module-manage-v29 {
  position: fixed !important;
  z-index: 17000 !important;

  display: block;

  padding: 5px;

  border:
    1px solid rgba(109,67,238,.28);

  border-radius:
    18px;

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

  box-shadow:
    0 14px 40px rgba(35,33,68,.16),
    0 3px 10px rgba(109,67,238,.10);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  opacity: 0;
  transform:
    translateY(7px)
    scale(.98);

  transition:
    opacity .16s ease,
    transform .16s ease;
}


.djr-module-manage-v29.is-open {
  opacity: 1;
  transform:
    translateY(0)
    scale(1);
}


.djr-module-manage-v29__inner {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(48px, 1fr));

  gap: 5px;
}


.djr-module-manage-v29__action {
  appearance: none;

  min-width: 0;
  min-height: 52px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 3px;

  padding:
    7px 5px;

  border:
    1px solid transparent;

  border-radius:
    13px;

  background:
    rgba(248,249,253,.94);

  color:
    #2f3550;

  font:
    inherit;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}


.djr-module-manage-v29__action:active {
  transform:
    scale(.95);
}


.djr-module-manage-v29__icon {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius:
    9px;

  font-size:
    1.08rem;

  font-weight:
    900;
}


.djr-module-manage-v29__label {
  font-size:
    .69rem;

  line-height:
    1;

  white-space:
    nowrap;
}


.djr-module-manage-v29__action--add {
  color:
    #0a8f62;

  border-color:
    rgba(30,190,128,.20);

  background:
    rgba(230,250,242,.92);
}


.djr-module-manage-v29__action--add
.djr-module-manage-v29__icon {
  background:
    rgba(62,210,151,.16);

  color:
    #07945f;
}


.djr-module-manage-v29__action--move {
  color:
    #6840dd;

  border-color:
    rgba(109,67,238,.18);

  background:
    rgba(244,240,255,.96);
}


.djr-module-manage-v29__action--move
.djr-module-manage-v29__icon {
  background:
    rgba(109,67,238,.12);

  color:
    #6d43ee;
}


.djr-module-manage-v29__action--remove {
  color:
    #d7303e;

  border-color:
    rgba(224,66,79,.18);

  background:
    rgba(255,240,242,.96);
}


.djr-module-manage-v29__action--remove
.djr-module-manage-v29__icon {
  background:
    rgba(224,66,79,.11);

  color:
    #dc3545;
}


.djr-module-manage-v29__action--remove.is-required {
  color:
    #687184;

  border-color:
    rgba(123,133,151,.16);

  background:
    rgba(242,244,247,.96);
}


.djr-module-manage-v29__action--remove.is-required
.djr-module-manage-v29__icon {
  background:
    rgba(120,130,150,.10);

  color:
    #788294;
}


.djr-module-manage-v29__action:disabled {
  opacity:
    .56;

  cursor:
    default;
}


@media (max-width: 420px) {

  .djr-module-manage-v29 {
    max-width:
      calc(100vw - 24px);
  }

  .djr-module-manage-v29__action {
    min-height:
      48px;

    padding:
      6px 3px;
  }

  .djr-module-manage-v29__label {
    font-size:
      .64rem;
  }
}

/* DJR_MODULE_MANAGEMENT_BAR_V29_END */


/* DJR_MODULE_MANAGEMENT_BAR_V30_START */

/*
 * Compact module management rail.
 *
 * It lives INSIDE the module drawer rather than against the
 * browser viewport. This is intentional and fixes the iOS
 * scrollY=0 / visual viewport positioning problem.
 */

.djr-module-manage-v29 {
  position: absolute !important;

  z-index: 14500 !important;

  width: 274px;
  max-width: calc(100% - 24px);

  margin: 0 !important;

  padding: 4px !important;

  border:
    1px solid rgba(109, 67, 238, .24) !important;

  border-radius:
    14px !important;

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

  box-shadow:
    0 8px 22px rgba(35, 33, 68, .13),
    0 2px 7px rgba(109, 67, 238, .08) !important;

  backdrop-filter:
    blur(16px) !important;

  -webkit-backdrop-filter:
    blur(16px) !important;

  transform:
    translateY(3px)
    scale(.985) !important;

  transform-origin:
    right center !important;
}


.djr-module-manage-v29.is-open {
  opacity: 1 !important;

  transform:
    translateY(0)
    scale(1) !important;
}


.djr-module-manage-v29__inner {
  display: grid !important;

  grid-template-columns:
    1.18fr .82fr .82fr 1.12fr !important;

  gap:
    3px !important;

  align-items:
    stretch !important;
}


.djr-module-manage-v29__action {
  min-width: 0 !important;

  min-height: 40px !important;
  height: 40px !important;

  padding:
    3px 4px !important;

  gap:
    1px !important;

  border-radius:
    10px !important;

  border-width:
    1px !important;

  box-shadow:
    none !important;
}


.djr-module-manage-v29__icon {
  width: 20px !important;
  height: 20px !important;

  min-width: 20px !important;

  display: grid !important;
  place-items: center !important;

  border-radius:
    7px !important;

  font-size:
    1rem !important;

  line-height:
    1 !important;

  font-weight:
    900 !important;
}


.djr-module-manage-v29__label {
  font-size:
    .61rem !important;

  line-height:
    1 !important;

  font-weight:
    850 !important;

  letter-spacing:
    .01em !important;
}


/*
 * Added state.
 */

.djr-module-manage-v29__action--add.is-added,
.djr-module-manage-v29__action--add:disabled {
  opacity:
    1 !important;

  background:
    rgba(229, 250, 241, .98) !important;

  border-color:
    rgba(38, 184, 124, .25) !important;

  color:
    #169667 !important;
}


/*
 * Move controls.
 */

.djr-module-manage-v29__action--move {
  background:
    rgba(245, 242, 255, .98) !important;

  border-color:
    rgba(109, 67, 238, .20) !important;

  color:
    #7046df !important;
}


/*
 * Remove from dashboard.
 *
 * This intentionally continues using the existing
 * member_enabled logic — it does NOT destroy the assignment,
 * so the module remains available to re-add later.
 */

.djr-module-manage-v29__action--remove {
  background:
    rgba(255, 242, 244, .98) !important;

  border-color:
    rgba(224, 62, 80, .20) !important;

  color:
    #d9364b !important;
}


/*
 * Allow the management rail to project beneath the module
 * icon without being clipped by historical drawer geometry.
 */

[data-djr-module-drawer],
[data-djr-module-drawer].is-open,
[data-djr-module-drawer]
.djr-module-drawer__sheet,
[data-djr-module-drawer]
.djr-module-library {
  overflow:
    visible !important;
}


/*
 * The wheel itself is still the only vertical scrolling
 * surface while module management is open.
 */

[data-djr-module-tree] {
  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  -webkit-overflow-scrolling:
    touch !important;

  overscroll-behavior-y:
    contain !important;

  touch-action:
    pan-y !important;
}

/* DJR_MODULE_MANAGEMENT_BAR_V30_END */

/* DJR_MODULE_TOUCH_PRIORITY_V31_START */

/*
 * While the module library is open the current dashboard
 * position is preserved. The wheel remains its own vertical
 * scrolling surface.
 */

/*
 * The actual module wheel remains interactive.
 */

body.djr-module-page-locked-v31
[data-djr-module-tree] {
  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  -webkit-overflow-scrolling:
    touch !important;

  overscroll-behavior-y:
    contain !important;

  touch-action:
    pan-y !important;
}


/*
 * Module icons are explicit management controls while the
 * library is active. Their interaction must not begin a
 * scroll gesture.
 */

body.djr-module-page-locked-v31
.djr-module-tree__icon {
  pointer-events:
    auto !important;

  touch-action:
    none !important;

  user-select:
    none !important;

  -webkit-user-select:
    none !important;

  -webkit-tap-highlight-color:
    transparent !important;

  cursor:
    pointer !important;
}


/*
 * The active row sits visually above the rail so the rail appears to
 * emerge from behind its icon. Only the icon itself should own hits in
 * the overlapping area; the row's transparent box must not cover the
 * rail buttons below it.
 */
body.djr-module-page-locked-v31
[data-djr-module-select].djr-module-wheel-v16-active {
  z-index:
    14510 !important;

  pointer-events:
    none !important;
}


/*
 * Keep all icon descendants transparent to hit testing so the
 * event target resolves consistently to the icon shell.
 */

body.djr-module-page-locked-v31
.djr-module-tree__icon > * {
  pointer-events:
    none !important;
}


/*
 * Management bar itself is always an active interaction zone.
 */

body.djr-module-page-locked-v31
.djr-module-manage-v29,
body.djr-module-page-locked-v31
.djr-module-manage-v29 * {
  pointer-events:
    auto !important;

  touch-action:
    manipulation !important;
}

/* DJR_MODULE_TOUCH_PRIORITY_V31_END */

/*
 * Keep the closed communications launcher box equal to its visible
 * button. The hidden service list previously remained in flex layout,
 * creating a 183x276px transparent hit target over the module wheel.
 * It still expands normally above the button when communications opens.
 */
.djro-message-launcher .djro-message-services {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  margin-bottom: 0;
}


/* ==========================================================
   STAFF DASHBOARD — DESKTOP COMPOSITION
   Mobile remains the source design; these rules only compose it
   into a deliberate centred desktop workspace.
   ========================================================== */

@media (min-width: 900px) {
  body:has(.member-dashboard) .shell {
    width: calc(100% - 64px) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
    overflow-x: visible !important;
  }

  body:has(.member-dashboard) .member-dashboard {
    width: 100% !important;
    max-width: 1180px !important;
    gap: 18px !important;
    overflow-x: visible !important;
  }

  body .djr-staff-portal-hero {
    padding: 24px 30px !important;
    border-radius: 0 0 26px 26px !important;
  }

  body .djr-staff-portal-hero .djr-staff-portal-identity {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    min-height: 0 !important;
    column-gap: 20px !important;
  }

  body .djr-staff-portal-hero .djr-staff-portal-avatar {
    width: 68px !important;
    height: 68px !important;
  }

  body .djr-staff-portal-hero .djr-staff-portal-hero__actions {
    margin-top: 18px !important;
    grid-template-columns: minmax(210px, .9fr) 1fr 1.15fr 38px !important;
  }

  body .djr-staff-portal-hero
  .djr-staff-portal-hero__actions > .djr-account-pill {
    min-height: 40px !important;
    padding: 0 20px !important;
    border: 1px solid rgba(85, 229, 192, .38) !important;
    background: linear-gradient(135deg, #159b76, #08795d) !important;
    box-shadow: 0 8px 22px rgba(4, 78, 59, .28) !important;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
  }

  body .djr-staff-portal-hero
  .djr-account-pill .djr-account-drawer-trigger__icon {
    color: #d9fff4 !important;
  }

  body:has(.member-dashboard) .djr-staff-dashboard-page {
    padding: 0 8px !important;
  }

  body:has(.member-dashboard) .djr-staff-module-area {
    margin: 8px 0 16px !important;
    gap: 16px !important;
  }

  body:has(.member-dashboard) .djr-staff-module-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    gap: 14px !important;
  }

  body:has(.member-dashboard) .djr-staff-module-card {
    min-height: 104px !important;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    padding: 18px 20px !important;
  }

  body:has(.member-dashboard) .member-jump-nav {
    margin: 72px 8px 0 !important;
    padding: 8px 12px !important;
    border-radius: 16px !important;
  }

  body:has(.member-dashboard) [data-djr-module-drawer] {
    width: min(680px, calc(100% - 48px)) !important;
    max-width: 680px !important;
    left: 50% !important;
    top: 36px !important;
    transform: translateX(-50%) !important;
  }

  body:has(.member-dashboard) .djro-message-launcher {
    right: max(24px, calc((100vw - 1180px) / 2 + 24px)) !important;
    bottom: 28px !important;
  }
}

.task-content-image {
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid rgba(109, 67, 238, .15);
  border-radius: 17px;
  background: #f7f8fc;
}

.task-content-image img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #eef1f7;
}

.task-content-image figcaption {
  padding: 9px 12px;
  color: #667289;
  font-size: .78rem;
  font-weight: 700;
}

.djr-staff-module-card__icon img,
.djr-module-tree__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.djr-staff-module-card__icon:has(img) > span {
  display: none;
}

/* Flow designer accents on the live staff dashboard stack. */
.djr-staff-module-card[data-module-accent="violet"] .djr-staff-module-card__icon{background:linear-gradient(145deg,rgba(117,72,231,.16),rgba(117,72,231,.08));color:#6940d9}.djr-staff-module-card[data-module-accent="blue"] .djr-staff-module-card__icon{background:rgba(39,142,224,.12);color:#277dcc}.djr-staff-module-card[data-module-accent="green"] .djr-staff-module-card__icon{background:rgba(33,164,124,.12);color:#168565}.djr-staff-module-card[data-module-accent="amber"] .djr-staff-module-card__icon{background:rgba(233,155,37,.14);color:#c57b0e}.djr-staff-module-card[data-module-accent="red"] .djr-staff-module-card__icon{background:rgba(220,81,101,.12);color:#c83e54}.djr-staff-module-card[data-module-accent="slate"] .djr-staff-module-card__icon{background:rgba(101,113,134,.13);color:#526075}.djr-staff-module-card__icon>span{display:grid;place-items:center}.djr-staff-module-card__icon>span svg{width:25px;height:25px}
.djr-module-accent-violet{background:linear-gradient(145deg,#8057f2,#5731cf)!important;color:#fff!important}.djr-module-accent-blue{background:linear-gradient(145deg,#36a2ec,#216bc9)!important;color:#fff!important}.djr-module-accent-green{background:linear-gradient(145deg,#2ab188,#08775d)!important;color:#fff!important}.djr-module-accent-amber{background:linear-gradient(145deg,#f2ad37,#ce790d)!important;color:#fff!important}.djr-module-accent-red{background:linear-gradient(145deg,#e76072,#b92b43)!important;color:#fff!important}.djr-module-accent-slate{background:linear-gradient(145deg,#7b879a,#4e5a6f)!important;color:#fff!important}.djr-module-preview__icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* DJR STAFF QUICK ACTIONS — registered module placements */
.djr-staff-quick-actions {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: calc(91px + env(safe-area-inset-bottom));
  z-index: 15520;
  display: grid;
  justify-items: start;
  gap: 9px;
}

/* Staff notification feed lives at the document layer to avoid clipping by
   the transformed dashboard hero in iOS standalone mode. */
:where(html:not([data-owner-theme])) .djr-notification-feed.djr-notification-feed--staff-floating {
  position: fixed !important;
  top: max(76px, calc(env(safe-area-inset-top) + 58px)) !important;
  right: 14px !important;
  left: auto !important;
  z-index: 2147483000 !important;
  display: block !important;
  width: min(390px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 100px) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

:where(html:not([data-owner-theme])) .djr-notification-feed.djr-notification-feed--staff-floating[hidden] {
  display: none !important;
}

@media (max-width: 600px) {
  :where(html:not([data-owner-theme])) .djr-notification-feed.djr-notification-feed--staff-floating {
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }
}

.djr-staff-quick-actions__trigger,
.djr-staff-quick-actions__tree button,
.djr-staff-quick-actions__tree a {
  border: 1px solid rgba(86, 65, 191, .22);
  background: rgba(255, 255, 255, .96);
  color: #17233d;
  box-shadow: 0 10px 28px rgba(23, 35, 61, .16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.djr-staff-quick-actions__trigger {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #8057f2, #5431ce);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.djr-staff-quick-actions__trigger span,
.djr-staff-quick-actions__tree span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(145deg, #8057f2, #5431ce);
  color: #fff;
  font-weight: 900;
}

.djr-staff-quick-actions__trigger .djr-staff-quick-actions__bolt {
  width: 24px;
  height: 24px;
  background: transparent;
}

.djr-staff-quick-actions__bolt svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linejoin: round;
}

.djr-staff-quick-actions__trigger > b {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.djr-quick-action-module-icon--badger,
.djr-badger-module-mark {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 27px !important;
  line-height: 1 !important;
  transform: scale(1.12);
}

.djr-staff-quick-actions__trigger b,
.djr-staff-quick-actions__tree b {
  font-size: .76rem;
  font-weight: 850;
}

.djr-staff-quick-actions__tree {
  display: grid;
  gap: 7px;
  order: -1;
}

.djr-staff-quick-actions__add span {
  border-radius: 50% !important;
  background: linear-gradient(145deg, #9257ff, #6334dc) !important;
  font-size: 1.45rem;
  font-weight: 650 !important;
  line-height: 1;
}

.djr-staff-quick-actions__picker {
  display: grid;
  gap: 7px;
  padding-left: 12px;
  border-left: 2px solid rgba(116, 70, 225, .28);
}

.djr-staff-quick-actions__picker[hidden] {
  display: none !important;
}

.djr-staff-quick-actions__picker button {
  min-width: 192px;
  background: rgba(248,246,255,.98);
}

.djr-staff-quick-actions__picker button:disabled {
  opacity: .58;
  cursor: wait;
}

.djr-staff-quick-actions__empty {
  width: 188px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(86, 65, 191, .18);
  border-radius: 15px;
  background: rgba(255,255,255,.97);
  color: #59667b;
  box-shadow: 0 10px 28px rgba(23,35,61,.16);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.35;
}

.djr-staff-quick-actions__tree[hidden] {
  display: none !important;
}

.djr-staff-quick-actions__tree button,
.djr-staff-quick-actions__tree a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 174px;
  padding: 8px 12px 8px 8px;
  border-radius: 15px;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 701px) {
  .djr-staff-quick-actions { left: max(18px, env(safe-area-inset-left)); bottom: calc(90px + env(safe-area-inset-bottom)); }
  .djr-staff-quick-actions__trigger { width:54px; height:54px; min-width:54px; min-height:54px; }
}

/* QUICK ACTIONS WHEEL V2 */
.djr-staff-quick-actions__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  border: 0;
  background: rgba(5, 12, 28, .24);
  backdrop-filter: blur(7px) saturate(.78);
  -webkit-backdrop-filter: blur(7px) saturate(.78);
}
.djr-staff-quick-actions__backdrop[hidden],
.djr-staff-quick-actions__controls[hidden] { display:none!important; }
.djr-staff-quick-actions.is-open { z-index: 2147482000; }
.djr-staff-quick-actions.is-open .djr-staff-quick-actions__trigger { position:relative; z-index:4; }
.djr-staff-quick-actions__tree {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(150px + env(safe-area-inset-bottom));
  z-index: 3;
  width: min(270px, calc(100vw - 40px));
  max-height: 230px;
  padding: 84px 5px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent);
  -webkit-mask-image: linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent);
}
.djr-staff-quick-actions__tree::-webkit-scrollbar { display:none; }
.djr-staff-quick-actions__tree > [data-djr-quick-action-item] {
  scroll-snap-align:center;
  min-height:54px;
  margin:7px 0;
  opacity:.5;
  transform:scale(.9) translateX(-7px);
  transition:opacity .18s ease,transform .18s ease,border-color .18s ease;
}
.djr-staff-quick-actions__tree > [data-djr-quick-action-item].is-active,
.djr-staff-quick-actions__tree > [data-djr-quick-action-item]:focus {
  opacity:1;
  transform:scale(1) translateX(0);
  border-color:rgba(113,65,222,.5);
  box-shadow:0 14px 34px rgba(43,29,98,.24);
}
.djr-staff-quick-actions__controls {
  position:absolute;
  left:62px;
  bottom:4px;
  z-index:5;
  display:flex;
  gap:7px;
}
.djr-staff-quick-actions__control {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(113,65,222,.28);
  border-radius:50%;
  background:rgba(255,255,255,.98);
  color:#6840d8;
  box-shadow:0 8px 22px rgba(23,35,61,.2);
  font:800 1.35rem/1 system-ui;
}
.djr-staff-quick-actions__control--add { background:linear-gradient(145deg,#9257ff,#6334dc); color:#fff; }
.djr-staff-quick-actions__control:disabled { opacity:.38; }
.djr-staff-quick-actions__picker {
  position:fixed;
  left:50%;
  bottom:max(108px,calc(92px + env(safe-area-inset-bottom)));
  z-index:8;
  width:min(390px,calc(100vw - 28px));
  max-height:min(520px,calc(100dvh - 150px));
  overflow:hidden;
  padding:0;
  border:1px solid rgba(103,69,207,.18);
  border-radius:24px;
  background:rgba(250,251,255,.98);
  box-shadow:0 28px 80px rgba(8,19,39,.34);
  transform:translateX(-50%);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.djr-staff-quick-actions__picker[hidden] { display:none!important; }
.djr-staff-quick-actions__picker header { display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #e7e8f2;background:linear-gradient(135deg,#f8f6ff,#eef6ff); }
.djr-staff-quick-actions__picker header div { display:grid;gap:2px; }
.djr-staff-quick-actions__picker header small { color:#7145dd;font-size:.6rem;font-weight:900;letter-spacing:.14em; }
.djr-staff-quick-actions__picker header strong { color:#17233d;font-size:1rem; }
.djr-staff-quick-actions__picker header button { width:34px;min-width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#eae5fb;color:#6540cc;font-size:1.4rem; }
.djr-staff-quick-actions__picker-list { display:grid;gap:8px;max-height:390px;padding:12px;overflow:auto; }
.djr-staff-quick-actions__picker-list button { width:100%;min-width:0;min-height:56px; }
body.djr-quick-actions-open { overflow:hidden!important; }
html:has(body.djr-quick-actions-open),
body.djr-quick-actions-open { overscroll-behavior:none!important; background:#eef1f7!important; }
.djr-staff-quick-actions__tree { overscroll-behavior:contain!important; }

/* UNIFIED STAFF HERO TOOLBAR V1 */
body:has(.member-dashboard) .djr-staff-portal-hero__actions {
  display:inline-flex!important;
  align-items:stretch!important;
  flex-wrap:nowrap!important;
  gap:0!important;
  min-height:50px!important;
  padding:3px!important;
  overflow:visible!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:27px!important;
  background:rgba(21,35,85,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
body:has(.member-dashboard) .djr-staff-portal-hero__actions > .djr-account-pill,
:where(html:not([data-owner-theme])) body:has(.member-dashboard) .djr-staff-portal-hero__actions > .djr-notification-feed-wrap,

body:has(.member-dashboard) .djr-staff-portal-hero__actions > .djr-staff-bulletin-button,

body:has(.member-dashboard) .djr-staff-portal-hero__actions > .djr-staff-hero-menu  { margin:0!important;min-height:44px!important;height:44px!important; }
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-account-pill,
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-alert-button,
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-bulletin-button,
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-hero-menu__button {
  min-height:44px!important;height:44px!important;margin:0!important;border:0!important;border-radius:22px!important;background:transparent!important;box-shadow:none!important;
}
body:has(.member-dashboard) .djr-staff-portal-hero__actions > * + * { border-left:1px solid rgba(255,255,255,.12)!important; }
:where(html:not([data-owner-theme])) body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-notification-feed-wrap { display:flex!important;align-items:center!important; }
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-alert-button { padding:0 15px!important; }
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-bulletin-button { padding:0 15px!important; }
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-hero-menu__button { width:44px!important;min-width:44px!important;padding:0!important; }
@media(max-width:430px){
 body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-account-pill{padding:0 10px!important}
 body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-alert-button,
 body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-bulletin-button{padding:0 11px!important}
}

/* QUICK WHEEL IOS GEOMETRY + TOOLBAR POLISH V3 */
.djr-staff-quick-actions__backdrop {
  appearance:none!important;
  -webkit-appearance:none!important;
  background:rgba(7,15,33,.24)!important;
  background-color:rgba(7,15,33,.24)!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent!important;
  touch-action:none!important;
}
.djr-staff-quick-actions__controls {
  left:62px!important;
  bottom:6px!important;
  height:38px!important;
  align-items:center!important;
}
.djr-staff-quick-actions__control {
  box-sizing:border-box!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  aspect-ratio:1/1!important;
  padding:0!important;
  margin:0!important;
  border-radius:999px!important;
  line-height:1!important;
  transform:none!important;
}
.djr-staff-quick-actions__control > span {
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  line-height:1!important;
  transform:translateY(-1px)!important;
}
.djr-staff-quick-actions__tree > [data-djr-quick-action-item] {
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

body:has(.member-dashboard) .djr-staff-portal-hero__actions {
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.9fr) minmax(0,1.08fr) 46px!important;
  align-items:center!important;
  width:100%!important;
  max-width:520px!important;
  min-height:54px!important;
  height:54px!important;
  padding:4px!important;
  border:1px solid rgba(169,185,255,.26)!important;
  border-radius:29px!important;
  background:linear-gradient(135deg,rgba(20,44,103,.76),rgba(69,45,149,.64))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px rgba(4,12,37,.18)!important;
}
body:has(.member-dashboard) .djr-staff-portal-hero__actions > * {
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:46px!important;
  border-left:0!important;
  position:relative!important;
}
body:has(.member-dashboard) .djr-staff-portal-hero__actions > * + *::before {
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.22),transparent);
}
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-account-pill,
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-alert-button,
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-bulletin-button,
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-hero-menu__button {
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 10px!important;
  border-radius:23px!important;
  color:#f7f9ff!important;
  font-size:.76rem!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
  white-space:nowrap!important;
}
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-account-pill:hover,
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-alert-button:hover,
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-bulletin-button:hover,
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-hero-menu__button:hover,
body:has(.member-dashboard) .djr-staff-portal-hero__actions [aria-expanded="true"] {
  background:linear-gradient(145deg,rgba(102,78,221,.62),rgba(50,111,198,.48))!important;
  box-shadow:inset 0 0 0 1px rgba(195,204,255,.2)!important;
}
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-account-drawer-trigger__icon,
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-bulletin-button__icon {
  flex:0 0 20px!important;
  width:20px!important;
  height:20px!important;
}
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-alert-button__dot {
  flex:0 0 9px!important;
  width:9px!important;
  height:9px!important;
  box-shadow:0 0 0 5px rgba(62,170,255,.12),0 0 14px rgba(72,179,255,.58)!important;
}
body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-hero-menu__button { padding:0!important; }
@media(max-width:370px){
 body:has(.member-dashboard) .djr-staff-portal-hero__actions{grid-template-columns:minmax(0,1fr) minmax(0,.78fr) minmax(0,.94fr) 42px!important}
 body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-account-pill,
 body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-alert-button,
 body:has(.member-dashboard) .djr-staff-portal-hero__actions .djr-staff-bulletin-button{padding:0 7px!important;font-size:.7rem!important}
}

/* QUICK ACTIONS APP LIBRARY V4 */
.djr-staff-quick-actions__picker {
  top:max(132px,calc(env(safe-area-inset-top) + 72px))!important;
  right:14px!important;
  bottom:auto!important;
  left:14px!important;
  width:auto!important;
  height:min(420px,calc(100dvh - 250px))!important;
  min-height:290px!important;
  max-height:420px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,rgba(250,251,255,.98),rgba(240,243,252,.96))!important;
  box-shadow:inset 0 0 0 1px rgba(108,76,213,.08),0 24px 70px rgba(7,16,38,.3)!important;
  transform:none!important;
}
.djr-staff-quick-actions__picker::after {
  content:"";
  position:absolute;
  inset:7px;
  z-index:-1;
  border:1px solid rgba(112,76,220,.08);
  border-radius:23px;
  pointer-events:none;
}
.djr-staff-quick-actions__picker header {
  min-height:72px!important;
  padding:14px 18px!important;
  border-bottom:1px solid rgba(105,78,192,.1)!important;
  background:linear-gradient(135deg,rgba(247,244,255,.98),rgba(235,246,255,.94))!important;
}
.djr-staff-quick-actions__picker header button {
  box-sizing:border-box!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  border-radius:50%!important;
}
.djr-staff-quick-actions__picker-list {
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(76px,92px))!important;
  align-content:start!important;
  justify-content:center!important;
  gap:18px 13px!important;
  max-height:calc(100% - 72px)!important;
  padding:22px 16px 25px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
.djr-staff-quick-actions__picker-list .djr-app-library__item {
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-content:start!important;
  gap:8px!important;
  box-sizing:border-box!important;
  width:92px!important;
  min-width:0!important;
  min-height:92px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  color:#1a2740!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.djr-staff-quick-actions__picker-list .djr-app-library__item:active {
  transform:scale(.95)!important;
}
.djr-app-library__icon {
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  width:60px!important;
  height:60px!important;
  min-width:60px!important;
  min-height:60px!important;
  max-width:60px!important;
  max-height:60px!important;
  overflow:hidden!important;
  border:1px solid rgba(113,70,218,.17)!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#8760f2,#5b37cf)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px rgba(70,45,145,.2)!important;
  font-size:1.45rem!important;
  font-weight:900!important;
  line-height:1!important;
}
.djr-app-library__icon img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:50%!important;
}
.djr-app-library__icon.djr-quick-action-module-icon--badger {
  font-size:34px!important;
  transform:none!important;
}
.djr-app-library__name {
  display:-webkit-box!important;
  width:88px!important;
  overflow:hidden!important;
  color:#27344d!important;
  font-size:.67rem!important;
  font-weight:800!important;
  line-height:1.15!important;
  text-align:center!important;
  white-space:normal!important;
  text-overflow:ellipsis!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}
.djr-staff-quick-actions__picker-list > .djr-staff-quick-actions__empty {
  grid-column:1/-1!important;
  width:auto!important;
  max-width:240px!important;
  text-align:center!important;
}
@media(min-width:700px){
 .djr-staff-quick-actions__picker{top:112px!important;left:50%!important;right:auto!important;width:min(620px,calc(100vw - 40px))!important;transform:translateX(-50%)!important}
}

/* UNIFIED STAFF TOOL DRAWERS V1 */
.djr-staff-tool-backdrop {
  position:fixed;
  inset:0;
  z-index:2147482400;
  background:rgba(5,12,28,.34);
  backdrop-filter:blur(9px) saturate(.72);
  -webkit-backdrop-filter:blur(9px) saturate(.72);
  -webkit-tap-highlight-color:transparent;
}
.djr-staff-tool-backdrop[hidden]{display:none!important}
body.djr-staff-tool-open{overflow:hidden!important;overscroll-behavior:none!important}
html.djr-staff-scroll-locked,
body.djr-staff-scroll-locked{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important}
:where(html:not([data-owner-theme])) .djr-notification-feed.djr-notification-feed--staff-floating,

.djr-account-drawer__shell,

.djr-staff-hero-menu__panel,

.djr-bulletin-drawer__sheet {touch-action:pan-y!important;overscroll-behavior:contain!important}
.djr-staff-drawer-mark {
  display:grid;
  place-items:center;
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:17px;
  background:linear-gradient(145deg,#8058ee,#5935cf);
  color:#fff;
  box-shadow:0 10px 24px rgba(85,51,178,.22);
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  font-size:1.35rem;
}
.djr-staff-drawer-close {
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  flex:0 0 46px!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  max-width:46px!important;
  max-height:46px!important;
  padding:0!important;
  border:1px solid #dfe3eb!important;
  border-radius:16px!important;
  background:#f7f8fb!important;
  color:#607086!important;
  box-shadow:none!important;
  font:400 1.55rem/1 system-ui!important;
}
.djr-staff-tool-drawer__heading,
:where(html:not([data-owner-theme])) .djr-notification-feed__heading {display:flex!important;align-items:center!important;gap:13px!important;min-width:0}
.djr-staff-tool-drawer__heading>span:last-child,
:where(html:not([data-owner-theme])) .djr-notification-feed__heading>span:last-child {display:grid;gap:2px;min-width:0}
.djr-staff-tool-drawer__heading small,
:where(html:not([data-owner-theme])) .djr-notification-feed__heading small {margin:0;color:#7450d8!important;font-size:.62rem!important;font-weight:900!important;letter-spacing:.14em!important}
.djr-staff-tool-drawer__heading strong,
:where(html:not([data-owner-theme])) .djr-notification-feed__heading strong {color:#172238!important;font-size:1.18rem!important;font-weight:900!important;line-height:1.05!important}

/* Notifications uses the same lower drawer geometry as Bulletins. */
:where(html:not([data-owner-theme])) .djr-notification-feed.djr-notification-feed--staff-floating {
  top:auto!important;
  right:12px!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  left:12px!important;
  z-index:2147482600!important;
  width:auto!important;
  max-width:560px!important;
  max-height:min(710px,calc(100dvh - 105px))!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:28px!important;
  background:rgba(250,251,255,.98)!important;
  box-shadow:0 28px 80px rgba(8,18,39,.34)!important;
}
:where(html:not([data-owner-theme])) .djr-notification-feed.djr-notification-feed--staff-floating>header {
  min-height:82px!important;
  padding:14px 18px!important;
  background:#fff!important;
}
:where(html:not([data-owner-theme])) .djr-notification-feed__header-actions {display:flex;align-items:center;gap:8px}
:where(html:not([data-owner-theme])) .djr-notification-feed__header-actions>[data-notifications-read-all] {font-size:.65rem!important;white-space:nowrap}
:where(html:not([data-owner-theme])) .djr-notification-feed.djr-notification-feed--staff-floating .djr-notification-feed__list {max-height:min(430px,48dvh)!important;padding:12px!important;background:#f7f8fc!important}
:where(html:not([data-owner-theme])) .djr-notification-feed.djr-notification-feed--staff-floating .djr-notification-item {margin-bottom:8px;border:1px solid #e4e7ef;border-radius:17px;background:#fff}
:where(html:not([data-owner-theme])) .djr-notification-feed.djr-notification-feed--staff-floating>footer {padding:12px!important;background:#fff!important}

/* Account content is preserved but presented inside the common sheet. */
.djr-account-drawer {
  position:fixed!important;
  inset:0!important;
  z-index:2147482600!important;
  display:block!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
  background:transparent!important;
  transform:none!important;
}
.djr-account-drawer[hidden]{display:none!important}
.djr-account-drawer__shell {
  position:absolute!important;
  right:12px!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  left:12px!important;
  width:auto!important;
  max-width:560px!important;
  max-height:min(710px,calc(100dvh - 105px))!important;
  margin:0 auto!important;
  overflow:hidden auto!important;
  pointer-events:auto!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:28px!important;
  background:rgba(250,251,255,.98)!important;
  color:#172238!important;
  box-shadow:0 28px 80px rgba(8,18,39,.34)!important;
  transform:translateY(24px)!important;
  opacity:0!important;
  transition:transform .22s ease,opacity .18s ease!important;
}
.djr-account-drawer.is-visible .djr-account-drawer__shell {transform:translateY(0)!important;opacity:1!important}
.djr-account-drawer__shell::after{display:none!important}
.djr-account-drawer__header {position:sticky!important;top:0!important;z-index:2!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:82px!important;padding:14px 18px!important;border-bottom:1px solid #e6e8ef!important;background:#fff!important}
.djr-account-drawer__eyebrow{margin:0!important;color:#7450d8!important;font-size:.62rem!important;font-weight:900!important;letter-spacing:.14em!important}
.djr-account-drawer__header h2{margin:0!important;color:#172238!important;font-size:1.18rem!important;line-height:1.05!important}
.djr-account-drawer__rows{display:grid!important;gap:9px!important;padding:12px!important;background:#f7f8fc!important}
.djr-account-drawer__row{min-height:64px!important;padding:12px 14px!important;border:1px solid #e2e6ef!important;border-radius:17px!important;background:#fff!important;color:#172238!important;box-shadow:none!important}
.djr-account-drawer__row+.djr-account-drawer__row{border-top:1px solid #e2e6ef!important}
.djr-account-drawer__content small{color:#7450d8!important}.djr-account-drawer__content>strong{color:#172238!important}

/* Portal menu becomes the fourth matching drawer. */
.djr-staff-hero-menu__panel {
  position:fixed!important;
  top:auto!important;
  right:12px!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  left:12px!important;
  z-index:2147482600!important;
  width:auto!important;
  max-width:560px!important;
  max-height:min(710px,calc(100dvh - 105px))!important;
  margin:0 auto!important;
  overflow:hidden auto!important;
  padding:0 12px 14px!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:28px!important;
  background:rgba(250,251,255,.98)!important;
  color:#172238!important;
  box-shadow:0 28px 80px rgba(8,18,39,.34)!important;
  transform:none!important;
}
.djr-staff-hero-menu__panel[hidden]{display:none!important}
.djr-staff-tool-drawer__header {position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:82px;margin:0 -12px 12px;padding:14px 18px;border-bottom:1px solid #e6e8ef;background:#fff}
.djr-staff-hero-menu__panel>a {min-height:55px!important;margin:7px 0!important;padding:11px 14px!important;border:1px solid #e2e6ef!important;border-radius:16px!important;background:#fff!important;color:#24324a!important;box-shadow:none!important}
.djr-staff-hero-menu__panel .djr-staff-hero-menu__divider{display:none!important}
@media(min-width:600px){
 :where(html:not([data-owner-theme])) .djr-notification-feed.djr-notification-feed--staff-floating {right:50%!important;left:auto!important;width:560px!important;transform:translateX(50%)!important}
}

/* Connections & access management V1 */
.djr-account-drawer__row--link{text-decoration:none!important;cursor:pointer}.djr-account-drawer__arrow{margin-left:auto;color:#7450d8;font-size:1.25rem;font-weight:900}.djr-connections-legacy{display:none!important}
.member-access-panel{overflow:hidden;background:linear-gradient(155deg,#fff 0%,#f8f9ff 100%)}
.djr-connections-intro{margin:.55rem 0 1rem;color:#667085;font-size:.86rem;line-height:1.5}
.djr-connection-credentials{display:grid;gap:9px}.djr-connection-credential{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px;border:1px solid #e1e6f0;border-radius:17px;background:#fff;box-shadow:0 7px 20px rgba(18,35,70,.045)}
.djr-connection-credential__icon{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#eaf7ff;color:#1588cf;font-size:1.1rem;font-weight:900}.djr-connection-credential__icon--purple{background:#f0ebff;color:#7146e7}.djr-connection-credential>div{display:grid;min-width:0;gap:2px}.djr-connection-credential small{color:#7450d8;font-size:.57rem;font-weight:900;letter-spacing:.12em}.djr-connection-credential strong{color:#172238;font-size:.78rem}.djr-connection-credential code{overflow:hidden;color:#315b9b;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}
.djr-copy-button{min-width:52px;padding:8px 9px;border:1px solid #ded8ff;border-radius:11px;background:#f4f1ff;color:#6742d3;font:800 .68rem/1 system-ui;cursor:pointer}.djr-copy-button.is-copied{border-color:#bcebd8;background:#e9f9f2;color:#157451}.djr-private-password-state{color:#7a8497;font-size:.64rem;font-weight:800;white-space:nowrap}
.djr-connection-folders{display:grid;gap:8px;margin-top:12px;padding:13px;border-radius:15px;background:#edf4ff}.djr-connection-folders>span{color:#526176;font-size:.68rem;font-weight:900}.djr-connection-folders code{padding:5px 8px;border-radius:8px;background:#fff;color:#315b9b;font-size:.68rem}
.djr-connection-help{display:grid;gap:9px;margin-top:13px}.djr-connection-help details{overflow:hidden;border:1px solid #e1e5ef;border-radius:16px;background:#fff}.djr-connection-help summary{display:flex;min-height:62px;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}.djr-connection-help summary::-webkit-details-marker{display:none}.djr-connection-help summary span{display:grid;gap:3px}.djr-connection-help summary b{color:#172238;font-size:.81rem}.djr-connection-help summary small{color:#778195;font-size:.67rem}.djr-connection-help summary i{display:grid;width:30px;height:30px;place-items:center;border-radius:10px;background:#f0ebff;color:#7146e7;font-size:1.1rem;font-style:normal;font-weight:800;transition:transform .2s ease}.djr-connection-help details[open] summary i{transform:rotate(45deg)}.djr-connection-help__body{padding:0 14px 15px;border-top:1px solid #edf0f5;color:#536176;font-size:.75rem;line-height:1.55}.djr-connection-help__body ol{margin:12px 0 0;padding-left:20px}.djr-connection-help__body p{margin:12px 0 7px}.djr-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;margin:7px 0}.djr-command-row code{overflow:auto;padding:9px;border-radius:10px;background:#091a34;color:#dbe8ff;font-size:.65rem;white-space:nowrap}
.djr-connection-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.djr-connection-actions a,.djr-connection-actions button{display:flex;width:100%;min-height:45px;align-items:center;justify-content:center;margin:0;text-align:center}.djr-connection-actions form{margin:0}.djr-connections-security{display:flex;gap:10px;align-items:flex-start;margin-top:13px;padding:12px;border:1px solid #dce9f6;border-radius:14px;background:#f1f7fd;color:#42566d}.djr-connections-security p{margin:0;font-size:.7rem;line-height:1.5}
@media(max-width:520px){.djr-connection-credential{grid-template-columns:38px minmax(0,1fr) auto;padding:10px;gap:9px}.djr-connection-credential__icon{width:38px;height:38px}.djr-copy-button{min-width:48px;padding:8px 7px}.djr-connection-actions{grid-template-columns:1fr}}

/* Personnel profile stack V1 */
.djr-profile-stack{display:grid;gap:13px;width:min(1180px,calc(100% - 36px));margin:22px auto 70px}.djr-profile-stack-card{display:grid;grid-template-columns:56px minmax(0,1fr) 34px;gap:15px;align-items:center;width:100%;padding:17px;border:1px solid #dfe4ee;border-radius:21px;background:linear-gradient(145deg,#fff,#f7f8ff);text-align:left;box-shadow:0 12px 34px rgba(16,31,58,.08);cursor:pointer}.djr-profile-stack-card>span:nth-child(2){display:grid;gap:3px}.djr-profile-stack-card small{color:#7450d8;font-size:.62rem;font-weight:900;letter-spacing:.14em}.djr-profile-stack-card strong{color:#172238;font-size:1rem}.djr-profile-stack-card em{color:#778195;font-size:.75rem;font-style:normal}.djr-profile-stack-card>i{color:#7248e8;font-size:1.25rem;font-style:normal}.djr-profile-stack-icon{display:grid;width:56px;height:56px;place-items:center;border-radius:17px;background:#e9f5ff;color:#168dcc;font-size:1.25rem;font-weight:900}.djr-profile-stack-icon--green{background:#e4f8f1;color:#159069}.djr-profile-stack-icon--purple{background:#eee8ff;color:#7248e8}
.djr-profile-overlay{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));opacity:0;transition:opacity .18s ease}.djr-profile-overlay[hidden]{display:none}.djr-profile-overlay.is-open{opacity:1}.djr-profile-overlay__backdrop{position:absolute;inset:0;border:0;background:rgba(9,18,37,.36);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}.djr-profile-overlay__frame{position:relative;width:min(760px,100%);max-height:calc(100dvh - 36px);overflow:hidden auto;border:1px solid rgba(255,255,255,.85);border-radius:28px;background:#f8f9fd;box-shadow:0 30px 90px rgba(5,15,35,.38);-webkit-overflow-scrolling:touch}.djr-profile-overlay__frame>.djr-member-profile-form-card{width:100%;margin:0;border:0;border-radius:0;box-shadow:none}.djr-profile-overlay__close{position:sticky;top:14px;z-index:8;float:right;width:48px;height:48px;margin:14px 14px -62px 0;border:1px solid #dfe3eb;border-radius:16px;background:#fff;color:#586579;font-size:1.6rem;cursor:pointer}.djr-profile-modal-open{overflow:hidden!important}.djr-profile-modal-open body{position:fixed;width:100%}.djr-credit-line-list{display:grid;gap:13px;padding:22px}.djr-credit-line-list article{display:grid;gap:8px;padding:22px;border-radius:22px;background:linear-gradient(145deg,#081a37,#332271);color:#fff;box-shadow:0 16px 38px rgba(10,24,54,.22)}.djr-credit-line-list article small{color:#9edaff;font-weight:900;letter-spacing:.12em}.djr-credit-line-list article strong{font-size:1.55rem}.djr-credit-line-list article b{font-size:1.15rem}.djr-credit-line-empty{padding:40px 20px;text-align:center}.djr-credit-line-empty>span{display:grid;width:60px;height:60px;place-items:center;margin:auto;border-radius:19px;background:#eee8ff;color:#7248e8;font-size:1.5rem;font-weight:900}
@media(max-width:600px){.djr-profile-stack{width:calc(100% - 28px);margin-top:14px}.djr-profile-stack-card{grid-template-columns:48px minmax(0,1fr) 24px;padding:14px;gap:11px}.djr-profile-stack-icon{width:48px;height:48px}.djr-profile-overlay{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}.djr-profile-overlay__frame{max-height:calc(100dvh - 16px);border-radius:24px}.djr-profile-overlay .djr-member-profile-form{padding:18px}.djr-profile-overlay .djr-member-profile-section-head{padding-right:55px}}
.djr-card-secure-actions{display:flex;gap:8px;margin-top:7px}.djr-card-secure-actions button{min-height:38px;padding:0 13px;border:1px solid rgba(255,255,255,.32);border-radius:11px;background:rgba(255,255,255,.13);color:#fff;font-weight:850}.djr-card-secure-actions button:disabled{opacity:.42}
.djr-credit-line-card--locked{position:relative;overflow:hidden;min-height:180px}.djr-credit-line-card--locked .djr-credit-line-card__content{display:grid;gap:8px;filter:blur(9px);opacity:.4;pointer-events:none;user-select:none}.djr-credit-line-card__lock{position:absolute;inset:0;z-index:2;display:grid;align-content:center;justify-items:center;gap:6px;padding:22px;background:rgba(7,20,43,.5);text-align:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.djr-credit-line-card__lock>span{display:grid;width:47px;height:47px;place-items:center;border:1px solid rgba(255,255,255,.32);border-radius:15px;background:rgba(255,255,255,.14)}.djr-credit-line-card__lock strong{font-size:1rem}.djr-credit-line-card__lock small{max-width:270px;color:#d7e1f2;font-size:.7rem;line-height:1.45}
.djr-profile-hero .djr-avatar{overflow:hidden}.djr-profile-hero .djr-avatar img{width:100%;height:100%;display:block;object-fit:cover}

/* Shared compact module actions: one icon row immediately above module copy. */
.djr-module-manage-v29 {
  max-width: calc(100% - 24px) !important;
  padding: 4px !important;
  border-radius: 999px !important;
}
.djr-module-manage-v29__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
}
.djr-module-manage-v29__action {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
.djr-module-manage-v29__icon {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  font-size: 1rem !important;
}
.djr-module-manage-v29__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.task-member-card.task-canvas-violet{background:linear-gradient(145deg,#fff,#f2edff)}.task-member-card.task-canvas-blue{background:linear-gradient(145deg,#fff,#edf6ff)}.task-member-card.task-canvas-mint{background:linear-gradient(145deg,#fff,#e9f8f3)}.task-member-card.task-canvas-amber{background:linear-gradient(145deg,#fff,#fff6e5)}.task-member-card.task-canvas-slate{background:linear-gradient(145deg,#fff,#edf1f5)}.task-rich-body p{margin:.45em 0}.task-rich-body h2,.task-rich-body h3{margin:.65em 0 .3em}.task-rich-body ul,.task-rich-body ol{padding-left:1.25em}.task-rich-body a{color:#5f3bd0;font-weight:750}


/* ==========================================================
   DJR FULLSCREEN — PORTAL FLOATING CONTROL LOCK V3
   2026-08-12

   Product Viewer / App Library own the viewport.
   Hide portal-level Back and More controls only.
   ========================================================== */

/* PRODUCT VIEWER */
html.djr-product-viewer-open .djro-floating-back,
body.djr-product-viewer-open .djro-floating-back,
html.djr-product-viewer-open .djr-floating-back,
body.djr-product-viewer-open .djr-floating-back,
html.djr-product-viewer-open .owner-floating-back,
body.djr-product-viewer-open .owner-floating-back,
html.djr-product-viewer-open .djr-staff-scroll-nav,
body.djr-product-viewer-open .djr-staff-scroll-nav,
html.djr-product-viewer-open [data-djr-staff-scroll-nav],
body.djr-product-viewer-open [data-djr-staff-scroll-nav],
html.djr-product-viewer-open .djr-staff-hero-menu,
body.djr-product-viewer-open .djr-staff-hero-menu,
html.djr-product-viewer-open .djr-staff-hero-menu__button,
body.djr-product-viewer-open .djr-staff-hero-menu__button,
html.djr-product-viewer-open [data-djr-staff-hero-menu-button],
body.djr-product-viewer-open [data-djr-staff-hero-menu-button],
html.djr-product-viewer-open [data-djr-floating-menu-button],
body.djr-product-viewer-open [data-djr-floating-menu-button] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* APP LIBRARY */
html.djr-app-library-open .djro-floating-back,
body.djr-app-library-open .djro-floating-back,
html.djr-app-library-open .djr-floating-back,
body.djr-app-library-open .djr-floating-back,
html.djr-app-library-open .owner-floating-back,
body.djr-app-library-open .owner-floating-back,
html.djr-app-library-open .djr-staff-scroll-nav,
body.djr-app-library-open .djr-staff-scroll-nav,
html.djr-app-library-open [data-djr-staff-scroll-nav],
body.djr-app-library-open [data-djr-staff-scroll-nav],
html.djr-app-library-open .djr-staff-hero-menu,
body.djr-app-library-open .djr-staff-hero-menu,
html.djr-app-library-open .djr-staff-hero-menu__button,
body.djr-app-library-open .djr-staff-hero-menu__button,
html.djr-app-library-open [data-djr-staff-hero-menu-button],
body.djr-app-library-open [data-djr-staff-hero-menu-button],
html.djr-app-library-open [data-djr-floating-menu-button],
body.djr-app-library-open [data-djr-floating-menu-button] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}



/* ==========================================================
   DJR DASHBOARD — EXACT APP LIBRARY MIRROR V3
   DJR_CANONICAL_MODULE_APP_SYNC_V3

   App Library remains the management/reorder canvas.
   Dashboard mirrors the same module identity, order and sizing.
   ========================================================== */

.djr-staff-module-grid:has(.djr-dashboard-module-app) {
  display: grid !important;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 24px 10px !important;

  align-items: start !important;
}


/* Remove legacy dashboard card geometry */

.djr-staff-module-grid
.djr-dashboard-module-app {
  position: relative !important;

  display: grid !important;
  justify-items: center !important;
  align-content: start !important;

  width: 100% !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  overflow: visible !important;

  color: #263650 !important;

  text-align: center !important;
}


/* EXACT App Library icon footprint */

.djr-staff-module-grid
.djr-dashboard-module-app
.djr-staff-module-card__icon {
  position: relative !important;

  display: grid !important;
  place-items: center !important;

  width: clamp(70px, 18vw, 94px) !important;
  aspect-ratio: 1 !important;

  height: auto !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: none !important;
  max-height: none !important;

  padding: 0 !important;
  margin: 0 auto !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(204, 193, 248, .76) !important;

  border-radius: 22% !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(238,234,255,.92)
    ) !important;

  box-shadow:
    0 12px 26px rgba(42,31,91,.13),
    0 3px 8px rgba(42,31,91,.06),
    inset 0 1px rgba(255,255,255,.95) !important;
}


/* Same canonical icon artwork as App Library */

.djr-staff-module-grid
.djr-dashboard-module-app
.djr-staff-module-card__icon svg {
  display: block !important;

  width: 52% !important;
  height: 52% !important;

  max-width: none !important;
  max-height: none !important;

  overflow: visible !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


.djr-staff-module-grid
.djr-dashboard-module-app
.djr-staff-module-card__icon svg * {
  fill: none !important;
  stroke: currentColor !important;
  vector-effect: non-scaling-stroke;
}


.djr-staff-module-grid
.djr-dashboard-module-app
.djr-staff-module-card__icon img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  border-radius: inherit !important;

  object-fit: cover !important;
}


/* Dashboard = App icon + name only */

.djr-staff-module-grid
.djr-dashboard-module-app
.djr-dashboard-module-app__body {
  display: block !important;

  width: 100% !important;

  min-width: 0 !important;

  padding: 0 !important;
  margin: 9px 0 0 !important;

  text-align: center !important;
}


.djr-staff-module-grid
.djr-dashboard-module-app
.djr-dashboard-module-app__body > small,

.djr-staff-module-grid
.djr-dashboard-module-app
.djr-dashboard-module-app__body > span:not(.djr-staff-module-card__status) {
  display: none !important;
}


.djr-staff-module-grid
.djr-dashboard-module-app
.djr-module-app__name {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  overflow: hidden !important;

  color: #263650 !important;

  font-size: .68rem !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;

  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* Existing status pills should not distort Apps layout */

.djr-staff-module-grid
.djr-dashboard-module-app
.djr-staff-module-card__status {
  position: absolute !important;

  left: 50% !important;
  bottom: auto !important;
  top: -8px !important;

  transform: translateX(-50%) !important;

  z-index: 2 !important;

  max-width: 90% !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  font-size: .48rem !important;
}


/* EXACT App Library mobile footprint */

@media (max-width: 600px) {

  .djr-staff-module-grid
  .djr-dashboard-module-app
  .djr-staff-module-card__icon {
    width: min(17vw, 76px) !important;
  }

  .djr-staff-module-grid
  .djr-dashboard-module-app
  .djr-module-app__name {
    font-size: .60rem !important;
  }
}


/* ==========================================================
   DJR DASHBOARD — DIRECT APP MODE V4
   DJR_DASHBOARD_APP_MODE_V4

   Dashboard mirrors App Library Apps presentation directly.
   Does NOT depend on JS-added presentation classes.

   Single-app state:
     icon surface
     module name
   Nothing else.
   ========================================================== */


/* ----------------------------------------------------------
   SHARED OWNER + STAFF DASHBOARD GRID
   ---------------------------------------------------------- */

[data-djr-module-grid][data-layout-key="owner-dashboard"],
[data-djr-module-grid][data-layout-key="staff-dashboard"] {
  display: grid !important;

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

  gap: 24px 10px !important;

  align-items: start !important;
}


/* ----------------------------------------------------------
   DESTROY LEGACY CARD SHELL
   ---------------------------------------------------------- */

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card {
  position: relative !important;

  display: grid !important;
  justify-items: center !important;
  align-content: start !important;

  width: 100% !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  color: #263650 !important;

  text-decoration: none !important;
  text-align: center !important;

  transform: none !important;
}


/* Kill legacy hover/card transforms too */

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card:hover,

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card:focus,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card:hover,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card:focus {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}


/* ----------------------------------------------------------
   EXACT APP LIBRARY ICON SURFACE
   ---------------------------------------------------------- */

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card__icon,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card__icon {
  position: relative !important;

  display: grid !important;
  place-items: center !important;

  width: clamp(70px, 18vw, 94px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: none !important;
  max-height: none !important;

  padding: 0 !important;
  margin: 0 auto !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(204, 193, 248, .76) !important;

  border-radius: 22% !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(238,234,255,.92)
    ) !important;

  box-shadow:
    0 12px 26px rgba(42,31,91,.13),
    0 3px 8px rgba(42,31,91,.06),
    inset 0 1px rgba(255,255,255,.95) !important;

  color: #6740d6 !important;
}


/* Saved SVG identity */

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card__icon svg,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card__icon svg {
  display: block !important;

  width: 52% !important;
  height: 52% !important;

  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  overflow: visible !important;
}


[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card__icon svg *,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card__icon svg * {
  fill: none !important;
  stroke: currentColor !important;
  vector-effect: non-scaling-stroke !important;
}


/* Uploaded module artwork */

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card__icon img,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card__icon img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: inherit !important;
}


/* ----------------------------------------------------------
   BODY = NAME ONLY
   ---------------------------------------------------------- */

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card__body,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card__body {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  padding: 0 !important;
  margin: 9px 0 0 !important;

  text-align: center !important;
}


/* Category and description NEVER appear in Apps mode */

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card__body > small,

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card__body > span,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card__body > small,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card__body > span {
  display: none !important;
}


/* Name exactly beneath icon */

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card__body > strong,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card__body > strong {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 2px !important;

  overflow: hidden !important;

  color: #263650 !important;

  font-size: .68rem !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;

  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* ----------------------------------------------------------
   ABSOLUTELY NO LEGACY STATUS IN SINGLE APP MODE

   Removes:
     Connected
     Connect
     Required-style old dashboard badges
     status pills from card layout
   ---------------------------------------------------------- */

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card__status,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card__status {
  display: none !important;

  position: static !important;

  width: 0 !important;
  height: 0 !important;

  min-width: 0 !important;
  min-height: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;

  opacity: 0 !important;
  visibility: hidden !important;

  pointer-events: none !important;
}


/* Also suppress any legacy card pseudo-art */

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card::before,

[data-djr-module-grid][data-layout-key="owner-dashboard"]
.djr-staff-module-card::after,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card::before,

[data-djr-module-grid][data-layout-key="staff-dashboard"]
.djr-staff-module-card::after {
  display: none !important;
  content: none !important;
}


/* ----------------------------------------------------------
   MOBILE — EXACT APP LIBRARY SIZE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

  [data-djr-module-grid][data-layout-key="owner-dashboard"],
  [data-djr-module-grid][data-layout-key="staff-dashboard"] {
    grid-template-columns:
      repeat(4, minmax(0,1fr)) !important;

    gap: 24px 10px !important;
  }


  [data-djr-module-grid][data-layout-key="owner-dashboard"]
  .djr-staff-module-card__icon,

  [data-djr-module-grid][data-layout-key="staff-dashboard"]
  .djr-staff-module-card__icon {
    width: min(17vw, 76px) !important;
  }


  [data-djr-module-grid][data-layout-key="owner-dashboard"]
  .djr-staff-module-card__body > strong,

  [data-djr-module-grid][data-layout-key="staff-dashboard"]
  .djr-staff-module-card__body > strong {
    font-size: .60rem !important;
  }
}



/* ==========================================================
   DJR_UNIVERSAL_PORTAL_NAV_V3_CSS_START

   SINGLE AUTHORITATIVE OWNER + STAFF NAVIGATION CONTROLLER

   DJR_STAFF_PURPLE_GRADIENT_THEME_V1

   DOM authority:
   templates/invitations/_universal_portal_nav.html

   OWNER + STAFF deliberately share:
   - exact navigation geometry
   - exact Quick Actions launcher
   - Account pill
   - primary purple pill
   - notification icon
   - settings/menu icon
   - Quick Actions sheet
   - menu surface geometry

   Portal-specific behaviour/content remains functional.
   ========================================================== */


/* ==========================================================
   1. MAIN UNIVERSAL CONTROL SURFACE
   ========================================================== */

.djr-universal-nav-v3 {
  position: relative !important;
  z-index: 14500 !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  min-height: 64px !important;

  display: grid !important;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    minmax(0, 1fr)
    42px
    42px !important;

  align-items: center !important;

  gap: 8px !important;

  margin:
    18px
    0
    0 !important;

  padding:
    7px
    10px !important;

  box-sizing: border-box !important;

  border:
    1px
    solid
    rgba(193, 183, 255, .31) !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      110deg,
      rgba(41, 91, 177, .88) 0%,
      rgba(76, 61, 192, .91) 49%,
      rgba(119, 48, 202, .91) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(35,20,91,.12),
    0 13px 30px rgba(35,25,105,.18) !important;

  overflow: visible !important;
  isolation: isolate !important;
}


/*
 * Old .djr-staff-portal-hero__actions geometry must not
 * compete with the universal controller when the same node
 * is used on Staff.
 */

.djr-staff-portal-hero__actions.djr-universal-nav-v3 {
  display: grid !important;

  flex: none !important;
  flex-direction: unset !important;

  width: 100% !important;
  max-width: 100% !important;

  gap: 8px !important;

  margin-top: 18px !important;

  padding: 7px 10px !important;

  overflow: visible !important;
}


/* ==========================================================
   2. QUICK ACTION LAUNCHER
   ========================================================== */

.djr-universal-nav-v3__quick {
  appearance: none !important;

  position: relative !important;

  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;

  display: grid !important;
  place-items: center !important;

  align-self: center !important;
  justify-self: start !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

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

  border-radius: 999px !important;

  color: #fff !important;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 5px 12px rgba(28,20,89,.13) !important;

  font: inherit !important;

  cursor: pointer !important;

  -webkit-tap-highlight-color: transparent !important;

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


.djr-universal-nav-v3__quick svg {
  width: 23px !important;
  height: 23px !important;

  display: block !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
}


.djr-universal-nav-v3__quick:active {
  transform: scale(.94) !important;

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


/* ==========================================================
   3. ACCOUNT + PRIMARY ACTION PILLS
   ========================================================== */

.djr-universal-nav-v3__pill {
  appearance: none !important;

  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  margin: 0 !important;
  padding:
    0
    13px !important;

  box-sizing: border-box !important;

  border-radius: 999px !important;

  font: inherit !important;
  font-size: .87rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;

  letter-spacing: -.01em !important;

  text-decoration: none !important;
  text-align: center !important;

  white-space: nowrap !important;

  cursor: pointer !important;

  overflow: hidden !important;

  -webkit-tap-highlight-color: transparent !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease !important;
}


.djr-universal-nav-v3__pill:active {
  transform: scale(.975) !important;
}


/* Account — solid white / purple */

.djr-universal-nav-v3__pill--account,
.djr-universal-nav-v3
.djr-account-drawer-trigger.djr-universal-nav-v3__pill--account {
  color: #6336ca !important;

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

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f7f4ff
    ) !important;

  box-shadow:
    0 5px 13px rgba(29,23,89,.13),
    inset 0 1px 0 #fff !important;
}


/*
 * Neutralise every old Account trigger child/indicator rule.
 * V3 intentionally shows only the clean Account label.
 */

.djr-universal-nav-v3
.djr-account-drawer-trigger__icon,

.djr-universal-nav-v3
.djr-account-drawer-trigger__chevron,

.djr-universal-nav-v3
.djr-account-drawer-trigger::before,

.djr-universal-nav-v3
.djr-account-drawer-trigger::after {
  display: none !important;
  content: none !important;
}


/* Primary action — purple pill */

.djr-universal-nav-v3__pill--action {
  color: #fff !important;

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

  background:
    linear-gradient(
      135deg,
      #8152f0 0%,
      #6d3ede 52%,
      #6031d2 100%
    ) !important;

  box-shadow:
    0 6px 15px rgba(50,28,145,.27),
    inset 0 1px 0 rgba(255,255,255,.19) !important;
}


/*
 * Staff Bulletin's legacy presentation must not leak into
 * the universal primary-action pill.
 */

.djr-universal-nav-v3
.djr-staff-bulletin-button {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  padding:
    0
    13px !important;

  overflow: visible !important;
}


.djr-universal-nav-v3
.djr-staff-bulletin-button__icon {
  display: none !important;
}


.djr-universal-nav-v3__action-badge {
  display: grid !important;
  place-items: center !important;

  min-width: 19px !important;
  height: 19px !important;

  padding:
    0
    5px !important;

  border:
    2px
    solid
    rgba(255,255,255,.95) !important;

  border-radius: 999px !important;

  color: #6740d7 !important;

  background: #fff !important;

  font-size: .62rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}


/* ==========================================================
   4. BARE BELL + SETTINGS
   ========================================================== */

.djr-universal-nav-v3__notification,
.djr-universal-nav-v3__menu-wrap,
.djr-universal-nav-v3__staff-menu {
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}


/*
 * display:contents deliberately makes the Owner menu wrapper
 * and Staff legacy menu wrapper transparent to grid geometry.
 *
 * Their icon therefore occupies exactly one universal grid
 * cell, while their menu panel can position against the
 * universal navigation itself.
 */

.djr-universal-nav-v3__menu-wrap,
.djr-universal-nav-v3
.djr-staff-hero-menu.djr-universal-nav-v3__staff-menu {
  display: contents !important;
}


.djr-universal-nav-v3__notification {
  position: relative !important;

  width: 42px !important;
  height: 46px !important;

  display: grid !important;
  place-items: center !important;
}


.djr-universal-nav-v3__icon,
.djr-universal-nav-v3
.djr-staff-hero-menu__button.djr-universal-nav-v3__icon {
  appearance: none !important;

  position: relative !important;

  width: 42px !important;
  height: 46px !important;
  min-width: 42px !important;
  min-height: 46px !important;
  max-width: 42px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;

  color: #fff !important;

  background: transparent !important;

  box-shadow: none !important;

  font: inherit !important;

  cursor: pointer !important;

  overflow: visible !important;

  -webkit-tap-highlight-color: transparent !important;

  transition:
    transform .15s ease,
    opacity .15s ease !important;
}


.djr-universal-nav-v3__icon svg,
.djr-universal-nav-v3
.djr-staff-hero-menu__button.djr-universal-nav-v3__icon svg {
  width: 27px !important;
  height: 27px !important;

  display: block !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  filter:
    drop-shadow(
      0
      2px
      4px
      rgba(22,15,74,.22)
    ) !important;
}


.djr-universal-nav-v3__icon--bell {
  color: #fff8f0 !important;
}


.djr-universal-nav-v3__icon--settings {
  color: #fff !important;
}


.djr-universal-nav-v3__icon:active {
  transform: scale(.90) !important;

  opacity: .82 !important;
}


/* Notification counter */

.djr-universal-nav-v3
.djr-header-notification-count {
  position: absolute !important;

  top: -2px !important;
  right: -3px !important;

  min-width: 22px !important;
  height: 22px !important;

  display: grid !important;
  place-items: center !important;

  padding:
    0
    4px !important;

  box-sizing: border-box !important;

  border:
    2.5px
    solid
    #fff !important;

  border-radius: 999px !important;

  color: #fff !important;
  background: #7a43de !important;

  font-size: .64rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  box-shadow:
    0
    4px
    10px
    rgba(41,24,112,.29) !important;

  z-index: 8 !important;
}


/* ==========================================================
   5. FULL-WIDTH SETTINGS / WORKSPACE MENU
   ========================================================== */

.djr-universal-nav-v3__menu[hidden],
.djr-universal-nav-v3
.djr-staff-hero-menu__panel[hidden] {
  display: none !important;
}


/*
 * Both portals use the same visual menu footprint.
 *
 * Owner menu stays here naturally.
 * V3 JS moves the Staff panel back into its universal nav
 * after older Staff JS temporarily portals it to <body>.
 */

.djr-universal-nav-v3__menu,
.djr-universal-nav-v3
.djr-staff-hero-menu__panel {
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;

  top:
    calc(100% + 10px) !important;

  bottom: auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  max-height:
    min(
      520px,
      calc(100dvh - 160px)
    ) !important;

  overflow:
    hidden
    auto !important;

  margin: 0 !important;
  padding: 9px !important;

  box-sizing: border-box !important;

  border:
    1px
    solid
    rgba(218,222,235,.98) !important;

  border-radius: 21px !important;

  color: #28364d !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.995),
      rgba(247,248,253,.995)
    ) !important;

  box-shadow:
    0
    24px
    58px
    rgba(7,17,44,.27) !important;

  transform: none !important;

  z-index: 30000 !important;

  -webkit-overflow-scrolling: touch !important;
}


/* Owner menu header */

.djr-universal-nav-v3__menu > header {
  display: grid !important;
  gap: 2px !important;

  min-height: 0 !important;

  padding:
    10px
    12px
    12px !important;

  margin: 0 !important;

  border: 0 !important;

  background: transparent !important;
}


.djr-universal-nav-v3__menu > header small {
  color: #7758d7 !important;

  font-size: .62rem !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
}


.djr-universal-nav-v3__menu > header strong {
  color: #202d45 !important;

  font-size: 1rem !important;
}


/* Same menu-item rhythm in both modes */

.djr-universal-nav-v3__menu > a,
.djr-universal-nav-v3__menu > button,
.djr-universal-nav-v3__menu > form button,

.djr-universal-nav-v3
.djr-staff-hero-menu__panel > a {
  width: 100% !important;

  min-height: 44px !important;

  display: flex !important;
  align-items: center !important;

  gap: 11px !important;

  padding:
    9px
    12px !important;

  margin: 0 !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 12px !important;

  color: #344158 !important;

  background: transparent !important;

  text-decoration: none !important;

  font: inherit !important;
  font-size: .81rem !important;
  font-weight: 770 !important;

  text-align: left !important;
}


.djr-universal-nav-v3__menu > a:active,
.djr-universal-nav-v3__menu > button:active,

.djr-universal-nav-v3
.djr-staff-hero-menu__panel > a:active {
  background: #f1effb !important;
}


.djr-universal-nav-v3__menu-divider,
.djr-universal-nav-v3
.djr-staff-hero-menu__divider {
  height: 1px !important;

  margin:
    6px
    8px !important;

  background: #e7eaf1 !important;
}


.djr-universal-nav-v3__menu-disabled {
  opacity: .50 !important;
}


.djr-universal-nav-v3__signout {
  color: #ae3e55 !important;
}


/*
 * Staff menu's legacy drawer header is kept functionally,
 * but visually harmonised with Owner.
 */

.djr-universal-nav-v3
.djr-staff-tool-drawer__header {
  position: static !important;

  min-height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  margin:
    -1px
    -1px
    7px !important;

  padding:
    10px
    12px !important;

  border: 0 !important;
  border-bottom:
    1px
    solid
    #e8ebf2 !important;

  background:
    linear-gradient(
      135deg,
      #f8f9ff,
      #f3f0ff
    ) !important;

  border-radius:
    14px
    14px
    0
    0 !important;
}


.djr-universal-nav-v3
.djr-staff-tool-drawer__heading {
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;

  gap: 10px !important;
}


.djr-universal-nav-v3
.djr-staff-tool-drawer__heading small {
  display: block !important;

  color: #795ce0 !important;

  font-size: .59rem !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
}


.djr-universal-nav-v3
.djr-staff-tool-drawer__heading strong {
  display: block !important;

  color: #243149 !important;

  font-size: .94rem !important;
}


.djr-universal-nav-v3
.djr-staff-drawer-mark {
  width: 32px !important;
  height: 32px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 10px !important;

  color: #7149da !important;
  background: #eee9ff !important;
}


.djr-universal-nav-v3
.djr-staff-drawer-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border:
    1px
    solid
    #dfe3ec !important;

  border-radius: 11px !important;

  color: #667086 !important;
  background: #fff !important;

  font-size: 1.15rem !important;
}


/* Primary Staff menu destination */

.djr-universal-nav-v3
.djr-staff-hero-menu__item--primary {
  display: grid !important;

  grid-template-columns:
    34px
    minmax(0,1fr) !important;

  align-items: center !important;

  gap: 10px !important;

  min-height: 57px !important;

  background:
    linear-gradient(
      135deg,
      #eef8ff,
      #f0edff
    ) !important;
}


.djr-universal-nav-v3
.djr-staff-hero-menu__item-icon {
  width: 32px !important;
  height: 32px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 10px !important;

  color: #326fd9 !important;
  background: #e5efff !important;
}


.djr-universal-nav-v3
.djr-staff-hero-menu__item-icon svg {
  width: 18px !important;
  height: 18px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
}


.djr-universal-nav-v3
.djr-staff-hero-menu__item--primary strong,

.djr-universal-nav-v3
.djr-staff-hero-menu__item--primary small {
  display: block !important;
}


.djr-universal-nav-v3
.djr-staff-hero-menu__item--primary strong {
  color: #2765c9 !important;

  font-size: .81rem !important;
}


.djr-universal-nav-v3
.djr-staff-hero-menu__item--primary small {
  margin-top: 2px !important;

  color: #79869a !important;

  font-size: .64rem !important;
}


/* ==========================================================
   6. NOTIFICATION FEED LAYER
   ========================================================== */

:where(html:not([data-owner-theme])) .djr-universal-nav-v3
.djr-notification-feed-wrap {
  overflow: visible !important;
}


:where(html:not([data-owner-theme])) .djr-notification-feed--staff-floating {
  z-index: 40000 !important;
}


/* ==========================================================
   7. UNIVERSAL QUICK ACTION SHEET
   ========================================================== */

.djr-universal-quick-sheet[hidden] {
  display: none !important;
}


.djr-universal-quick-sheet {
  position: fixed !important;

  inset: 0 !important;

  z-index: 2147483000 !important;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;

  padding: 0 !important;
}


.djr-universal-quick-sheet__backdrop {
  appearance: none !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background:
    rgba(5,10,28,.50) !important;

  backdrop-filter:
    blur(7px) !important;

  -webkit-backdrop-filter:
    blur(7px) !important;
}


.djr-universal-quick-sheet__panel {
  position: relative !important;

  width:
    min(
      620px,
      calc(100% - 18px)
    ) !important;

  margin:
    0
    auto
    max(
      9px,
      env(safe-area-inset-bottom)
    ) !important;

  padding:
    18px
    18px
    22px !important;

  box-sizing: border-box !important;

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

  border-radius: 27px !important;

  color: #243049 !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.995),
      rgba(246,243,255,.995)
    ) !important;

  box-shadow:
    0
    -8px
    48px
    rgba(13,18,57,.30) !important;

  animation:
    djr-universal-v3-sheet-in
    .23s
    cubic-bezier(.2,.83,.26,1)
    both !important;

  z-index: 2 !important;
}


@keyframes djr-universal-v3-sheet-in {
  from {
    opacity: 0;
    transform: translateY(34px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.djr-universal-quick-sheet__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;
}


.djr-universal-quick-sheet__header > div {
  display: grid !important;
  gap: 2px !important;
}


.djr-universal-quick-sheet__header small {
  color: #7752d6 !important;

  font-size: .61rem !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
}


.djr-universal-quick-sheet__header strong {
  color: #212d46 !important;

  font-size: 1.09rem !important;
}


.djr-universal-quick-sheet__close {
  appearance: none !important;

  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border:
    1px
    solid
    #dfe2eb !important;

  border-radius: 13px !important;

  color: #667187 !important;
  background: #fff !important;

  font: inherit !important;
  font-size: 1.25rem !important;

  cursor: pointer !important;
}


.djr-universal-quick-sheet__intro {
  margin:
    13px
    0
    17px !important;

  color: #7b8597 !important;

  font-size: .75rem !important;
  line-height: 1.45 !important;
}


.djr-universal-quick-sheet__slots {
  display: grid !important;

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

  align-items: start !important;

  gap: 15px !important;
}


/* Quick-action bubble */

.djr-universal-quick-bubble {
  appearance: none !important;

  min-width: 0 !important;
  width: 100% !important;

  display: grid !important;
  justify-items: center !important;

  gap: 7px !important;

  padding:
    12px
    6px
    10px !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 18px !important;

  color: #34415c !important;
  background: transparent !important;

  font: inherit !important;

  text-decoration: none !important;
  text-align: center !important;

  cursor: pointer !important;

  -webkit-tap-highlight-color: transparent !important;
}


.djr-universal-quick-bubble > span,
.djr-universal-quick-bubble__icon {
  width: 70px !important;
  height: 70px !important;

  display: grid !important;
  place-items: center !important;

  box-sizing: border-box !important;

  border:
    1px
    solid
    #d8cffb !important;

  border-radius: 999px !important;

  color: #7041d8 !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f0ebff
    ) !important;

  box-shadow:
    0
    9px
    22px
    rgba(61,39,142,.13),
    inset 0 1px 0 #fff !important;

  font-size: 1.48rem !important;
  font-weight: 800 !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease !important;
}


.djr-universal-quick-bubble:active > span,
.djr-universal-quick-bubble:active
.djr-universal-quick-bubble__icon {
  transform: scale(.94) !important;
}


/* Installed action */

.djr-universal-quick-bubble--installed
.djr-universal-quick-bubble__icon {
  color: #fff !important;

  border-color:
    rgba(255,255,255,.40) !important;

  background:
    linear-gradient(
      145deg,
      #7549ea,
      #5535c9
    ) !important;

  box-shadow:
    0
    10px
    24px
    rgba(77,45,183,.25),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}


.djr-universal-quick-bubble strong {
  display: block !important;

  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;

  color: #293650 !important;

  font-size: .72rem !important;
  font-weight: 850 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


.djr-universal-quick-bubble small {
  display: block !important;

  color: #8a94a6 !important;

  font-size: .61rem !important;
  font-weight: 760 !important;
}


/* Lock document while sheet is open */

html.djr-universal-quick-open,
body.djr-universal-quick-open {
  overflow: hidden !important;
}


/* ==========================================================
   8. PHONE GEOMETRY
   ========================================================== */

@media (max-width: 520px) {

  .djr-universal-nav-v3,
  .djr-staff-portal-hero__actions.djr-universal-nav-v3 {
    grid-template-columns:
      46px
      minmax(0,1fr)
      minmax(0,1fr)
      40px
      40px !important;

    gap: 7px !important;

    min-height: 61px !important;

    padding:
      7px
      8px !important;
  }


  .djr-universal-nav-v3__quick {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }


  .djr-universal-nav-v3__pill {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    padding:
      0
      10px !important;

    font-size: .82rem !important;
  }


  .djr-universal-nav-v3__notification {
    width: 40px !important;
    height: 44px !important;
  }


  .djr-universal-nav-v3__icon,
  .djr-universal-nav-v3
  .djr-staff-hero-menu__button.djr-universal-nav-v3__icon {
    width: 40px !important;
    height: 44px !important;
    min-width: 40px !important;
    min-height: 44px !important;
  }


  .djr-universal-nav-v3__icon svg,
  .djr-universal-nav-v3
  .djr-staff-hero-menu__button.djr-universal-nav-v3__icon svg {
    width: 25px !important;
    height: 25px !important;
  }


  .djr-universal-quick-sheet__panel {
    width:
      calc(100% - 14px) !important;

    padding:
      17px
      14px
      21px !important;

    border-radius: 25px !important;
  }


  .djr-universal-quick-sheet__slots {
    gap: 10px !important;
  }


  .djr-universal-quick-bubble {
    padding:
      10px
      2px
      8px !important;
  }


  .djr-universal-quick-bubble > span,
  .djr-universal-quick-bubble__icon {
    width: 64px !important;
    height: 64px !important;

    font-size: 1.33rem !important;
  }

}


@media (max-width: 390px) {

  .djr-universal-nav-v3,
  .djr-staff-portal-hero__actions.djr-universal-nav-v3 {
    grid-template-columns:
      42px
      minmax(0,1fr)
      minmax(0,1fr)
      36px
      36px !important;

    gap: 5px !important;

    min-height: 57px !important;

    padding:
      6px
      7px !important;
  }


  .djr-universal-nav-v3__quick {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }


  .djr-universal-nav-v3__quick svg {
    width: 21px !important;
    height: 21px !important;
  }


  .djr-universal-nav-v3__pill {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    padding:
      0
      7px !important;

    font-size: .75rem !important;
  }


  .djr-universal-nav-v3__notification {
    width: 36px !important;
    height: 40px !important;
  }


  .djr-universal-nav-v3__icon,
  .djr-universal-nav-v3
  .djr-staff-hero-menu__button.djr-universal-nav-v3__icon {
    width: 36px !important;
    height: 40px !important;
    min-width: 36px !important;
    min-height: 40px !important;
  }


  .djr-universal-nav-v3__icon svg,
  .djr-universal-nav-v3
  .djr-staff-hero-menu__button.djr-universal-nav-v3__icon svg {
    width: 23px !important;
    height: 23px !important;
  }


  .djr-universal-nav-v3
  .djr-header-notification-count {
    top: -3px !important;
    right: -4px !important;

    min-width: 20px !important;
    height: 20px !important;

    font-size: .59rem !important;
  }


  .djr-universal-quick-bubble > span,
  .djr-universal-quick-bubble__icon {
    width: 59px !important;
    height: 59px !important;
  }


  .djr-universal-quick-bubble strong {
    font-size: .66rem !important;
  }

}


/* ==========================================================
   DJR_UNIVERSAL_PORTAL_NAV_V3_CSS_END
   ========================================================== */



/* ==========================================================
   DJR_UNIVERSAL_PORTAL_NAV_V3_BODY_MODAL_FIX_START

   TRUE BODY-LEVEL QUICK ACTION MODAL

   The universal sheet is moved to the end of <body> by the
   V3 JavaScript controller. It therefore sits outside hero,
   header and navigation stacking contexts.

   2147483647 is intentionally used because legacy portal UI
   already contains layers at the browser's practical maximum.
   As this node is appended later in <body>, it paints above
   equal-z-index legacy siblings as well.

   DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   ========================================================== */


html.djr-universal-quick-open,
body.djr-universal-quick-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}


/*
 * Absolute portal modal authority.
 */

body > .djr-universal-quick-sheet {
  position: fixed !important;

  inset:
    0
    0
    0
    0 !important;

  width: 100vw !important;
  width: 100dvw !important;

  height: 100vh !important;
  height: 100dvh !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  isolation: isolate !important;

  z-index: 2147483647 !important;

  overflow: hidden !important;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}


body > .djr-universal-quick-sheet[hidden] {
  display: none !important;
}


/*
 * Full-screen glass layer.
 *
 * This sits between every portal surface and the Quick
 * Actions panel, including:
 * - Owner / Staff bottom navigation
 * - Badger launcher
 * - blue communications launcher
 * - header controls
 * - module cards
 * - floating navigation controls
 */

body >
.djr-universal-quick-sheet
>
.djr-universal-quick-sheet__backdrop {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    rgba(4, 9, 25, .50) !important;

  backdrop-filter:
    blur(10px)
    saturate(.82) !important;

  -webkit-backdrop-filter:
    blur(10px)
    saturate(.82) !important;

  z-index: 0 !important;

  cursor: default !important;
}


/*
 * Quick Actions sheet itself.
 */

body >
.djr-universal-quick-sheet
>
.djr-universal-quick-sheet__panel {
  position: relative !important;

  z-index: 1 !important;

  width:
    min(
      640px,
      calc(100% - 18px)
    ) !important;

  max-height:
    min(
      72dvh,
      620px
    ) !important;

  overflow:
    hidden
    auto !important;

  margin:
    0
    auto
    max(
      10px,
      env(safe-area-inset-bottom)
    ) !important;

  padding:
    20px
    18px
    max(
      24px,
      calc(
        18px
        + env(safe-area-inset-bottom)
      )
    ) !important;

  box-sizing: border-box !important;

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

  border-radius:
    30px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.995),
      rgba(246,242,255,.995)
    ) !important;

  box-shadow:
    0
    -10px
    60px
    rgba(8, 13, 48, .34),
    inset
    0
    1px
    0
    rgba(255,255,255,.92) !important;

  -webkit-overflow-scrolling: touch !important;
}


/*
 * Prevent old fixed-element transforms/filters from creating
 * any accidental interaction plane while Quick Actions is up.
 *
 * They remain visible underneath the glass so the whole page
 * actually looks blurred instead of controls simply vanishing.
 */

html.djr-universal-quick-open
body
.owner-nav,

html.djr-universal-quick-open
body
.djr-staff-scroll-nav,

html.djr-universal-quick-open
body
.badger-launcher,

html.djr-universal-quick-open
body
.djro-message-launcher,

html.djr-universal-quick-open
body
.member-mail-launcher,

body.djr-universal-quick-open
.owner-nav,

body.djr-universal-quick-open
.djr-staff-scroll-nav,

body.djr-universal-quick-open
.badger-launcher,

body.djr-universal-quick-open
.djro-message-launcher,

body.djr-universal-quick-open
.member-mail-launcher {
  pointer-events: none !important;
}


/*
 * iOS Safari viewport handling.
 */

@supports (height: 100dvh) {

  body >
  .djr-universal-quick-sheet {
    min-height: 100dvh !important;
  }
}


@media (max-width: 600px) {

  body >
  .djr-universal-quick-sheet
  >
  .djr-universal-quick-sheet__panel {
    width:
      calc(
        100%
        - 12px
      ) !important;

    margin-bottom:
      max(
        6px,
        env(safe-area-inset-bottom)
      ) !important;

    border-radius:
      28px !important;
  }

}


/* ==========================================================
   DJR_UNIVERSAL_PORTAL_NAV_V3_BODY_MODAL_FIX_END
   ========================================================== */


/* ==========================================================
   DJR_UNIVERSAL_PORTAL_NAV_V3_SLOT_PICKER_START
   ========================================================== */

.djr-universal-quick-slot {
  min-width: 0 !important;
}


/*
 * Picker replaces the normal bubble area visually and grows
 * vertically inside the existing Quick Actions sheet.
 */

.djr-universal-quick-picker[hidden] {
  display: none !important;
}

.djr-universal-quick-picker {
  grid-column: 1 / -1 !important;

  width: 100% !important;

  margin-top: 4px !important;

  overflow: hidden !important;

  border:
    1px
    solid
    rgba(113,75,225,.16) !important;

  border-radius: 20px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(248,246,255,.98)
    ) !important;

  box-shadow:
    inset
    0
    1px
    0
    rgba(255,255,255,.9),
    0
    10px
    28px
    rgba(54,39,116,.09) !important;
}


.djr-universal-quick-picker > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;

  padding:
    14px
    15px
    12px !important;

  border-bottom:
    1px
    solid
    rgba(214,216,231,.82) !important;

  background:
    linear-gradient(
      135deg,
      #f9f8ff,
      #f3efff
    ) !important;
}


.djr-universal-quick-picker > header > div {
  display: grid !important;
  gap: 2px !important;
}


.djr-universal-quick-picker > header small {
  color: #7b51dc !important;

  font-size: .58rem !important;
  font-weight: 900 !important;

  letter-spacing: .15em !important;
}


.djr-universal-quick-picker > header strong {
  color: #243049 !important;

  font-size: .89rem !important;
}


.djr-universal-quick-picker > header button {
  appearance: none !important;

  width: 34px !important;
  height: 34px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border:
    1px
    solid
    #dddfea !important;

  border-radius: 11px !important;

  color: #667187 !important;
  background: #fff !important;

  font: inherit !important;
  font-size: 1.05rem !important;

  cursor: pointer !important;
}


.djr-universal-quick-picker__list {
  display: grid !important;
  gap: 6px !important;

  max-height: 280px !important;

  overflow-y: auto !important;
  overscroll-behavior: contain !important;

  padding: 8px !important;

  -webkit-overflow-scrolling: touch !important;
}


.djr-universal-quick-picker__item {
  appearance: none !important;

  width: 100% !important;
  min-height: 62px !important;

  display: grid !important;

  grid-template-columns:
    44px
    minmax(0,1fr)
    32px !important;

  align-items: center !important;

  gap: 11px !important;

  padding:
    8px
    10px !important;

  border: 0 !important;
  border-radius: 14px !important;

  color: #26334e !important;

  background:
    transparent !important;

  font: inherit !important;

  text-align: left !important;

  cursor: pointer !important;

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


.djr-universal-quick-picker__item:hover,
.djr-universal-quick-picker__item:focus-visible {
  background:
    rgba(116,73,228,.075) !important;

  outline: none !important;
}


.djr-universal-quick-picker__item:active {
  transform:
    scale(.985) !important;
}


.djr-universal-quick-picker__icon {
  width: 44px !important;
  height: 44px !important;

  display: grid !important;
  place-items: center !important;

  border:
    1px
    solid
    rgba(118,76,222,.16) !important;

  border-radius: 14px !important;

  color: #6e40d8 !important;

  background:
    linear-gradient(
      145deg,
      #fff,
      #f0ebff
    ) !important;

  font-size: 1.12rem !important;
  font-weight: 900 !important;

  box-shadow:
    0
    5px
    14px
    rgba(92,54,186,.08) !important;
}


.djr-universal-quick-picker__copy {
  min-width: 0 !important;

  display: grid !important;
  gap: 3px !important;
}


.djr-universal-quick-picker__copy strong {
  overflow: hidden !important;

  color: #27334b !important;

  font-size: .78rem !important;
  font-weight: 850 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


.djr-universal-quick-picker__copy small {
  color: #8a93a4 !important;

  font-size: .64rem !important;
}


.djr-universal-quick-picker__add {
  width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 10px !important;

  color: #7447dd !important;

  background:
    #eee9ff !important;

  font-size: 1.12rem !important;
  font-weight: 900 !important;
}


.djr-universal-quick-picker__item.is-saving {
  opacity: .55 !important;
  pointer-events: none !important;
}


.djr-universal-quick-picker__item.is-saving
.djr-universal-quick-picker__add {
  font-size: 0 !important;
}


.djr-universal-quick-picker__item.is-saving
.djr-universal-quick-picker__add::after {
  content: "" !important;

  width: 13px !important;
  height: 13px !important;

  border:
    2px
    solid
    rgba(116,71,221,.25) !important;

  border-top-color:
    #7447dd !important;

  border-radius: 50% !important;

  animation:
    djr-universal-quick-spin
    .65s
    linear
    infinite !important;
}


@keyframes djr-universal-quick-spin {
  to {
    transform: rotate(360deg);
  }
}


.djr-universal-quick-picker__empty {
  display: grid !important;

  justify-items: center !important;

  gap: 4px !important;

  padding:
    24px
    16px !important;

  text-align: center !important;
}


.djr-universal-quick-picker__empty strong {
  color: #354158 !important;

  font-size: .77rem !important;
}


.djr-universal-quick-picker__empty small {
  max-width: 270px !important;

  color: #8b94a5 !important;

  font-size: .65rem !important;
  line-height: 1.45 !important;
}


/*
 * When the vertical module picker is open, keep the three
 * Quick Action bubbles above it instead of replacing them.
 */

.djr-universal-quick-sheet__slots {
  align-content: start !important;
}


@media (max-width: 430px) {

  .djr-universal-quick-picker__list {
    max-height: 245px !important;
  }

  .djr-universal-quick-picker__item {
    min-height: 58px !important;

    grid-template-columns:
      40px
      minmax(0,1fr)
      30px !important;

    gap: 9px !important;
  }

  .djr-universal-quick-picker__icon {
    width: 40px !important;
    height: 40px !important;
  }
}


/* ==========================================================
   DJR_UNIVERSAL_PORTAL_NAV_V3_SLOT_PICKER_END
   ========================================================== */


/* ==========================================================
   DJR_UNIVERSAL_QUICK_ACTIONS_V5_STATE_START

   DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   ========================================================== */

/*
 * App Library is closed by default.
 * Merely opening Quick Actions must NEVER reveal it.
 */
.djr-universal-quick-sheet:not(.is-picker-open)
.djr-universal-quick-picker {
  display: none !important;
}


/*
 * Small purple underlined Edit control.
 */
.djr-universal-quick-edit {
  appearance: none !important;

  grid-column: 1 / -1 !important;
  justify-self: center !important;

  margin: 2px auto 0 !important;
  padding: 2px 5px !important;

  border: 0 !important;
  border-radius: 0 !important;

  color: #7145df !important;
  background: transparent !important;

  box-shadow: none !important;

  font: inherit !important;
  font-size: .69rem !important;
  font-weight: 850 !important;

  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;

  cursor: pointer !important;
}


/*
 * Edit affects installed icons only. It never exposes App Library.
 */
.djr-universal-quick-sheet.is-editing
.djr-universal-quick-picker {
  display: none !important;
}


.djr-universal-quick-sheet.is-editing
.djr-universal-quick-bubble--installed {
  position: relative !important;
  cursor: pointer !important;
}


.djr-universal-quick-sheet.is-editing
.djr-universal-quick-bubble--installed::after {
  content: "Remove" !important;

  position: absolute !important;
  left: 50% !important;
  bottom: -1px !important;

  transform: translateX(-50%) !important;

  color: #7145df !important;

  font-size: .57rem !important;
  font-weight: 850 !important;

  text-decoration: underline !important;
  text-underline-offset: 2px !important;

  pointer-events: none !important;
}


/* ==========================================================
   DJR_UNIVERSAL_QUICK_ACTIONS_V5_STATE_END
   ========================================================== */

/* DJR_UNIVERSAL_NAV_V3_QUICK_BOLT_V1_START
   DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   Quick Actions lightning identity
   ========================================================== */

.djr-universal-nav-v3__quick
.djr-universal-nav-v3__quick-bolt {
  width: 29px !important;
  height: 36px !important;

  display: block !important;
  overflow: visible !important;

  fill: #fff !important;
  stroke: none !important;

  transform-origin: 50% 50% !important;

  filter:
    drop-shadow(
      0 0 3px rgba(255,255,255,.28)
    ) !important;

  animation:
    djr-universal-quick-bolt-pulse
    4.8s
    ease-in-out
    infinite !important;
}


.djr-universal-nav-v3__quick
.djr-universal-nav-v3__quick-bolt path {
  fill: #fff !important;
  stroke: none !important;
}


@keyframes djr-universal-quick-bolt-pulse {

  0%,
  74%,
  100% {
    transform: scale(1);

    filter:
      drop-shadow(
        0 0 3px rgba(255,255,255,.22)
      );
  }

  79% {
    transform: scale(1.10);

    filter:
      drop-shadow(
        0 0 8px rgba(255,255,255,.72)
      );
  }

  84% {
    transform: scale(.98);

    filter:
      drop-shadow(
        0 0 4px rgba(255,255,255,.34)
      );
  }

  89% {
    transform: scale(1.06);

    filter:
      drop-shadow(
        0 0 7px rgba(255,255,255,.58)
      );
  }

  94% {
    transform: scale(1);

    filter:
      drop-shadow(
        0 0 3px rgba(255,255,255,.22)
      );
  }
}


@media (prefers-reduced-motion: reduce) {

  .djr-universal-nav-v3__quick
  .djr-universal-nav-v3__quick-bolt {
    animation: none !important;
  }

}

/* DJR_UNIVERSAL_NAV_V3_QUICK_BOLT_V1_END */



/* ==========================================================
   DJR_UNIFIED_PORTAL_SHELL_CANVA_V1_START

   Visual reference:
   compact DJR workspace / mobile application shell

   This is PRESENTATION ONLY.

   Existing authorities retained:
   - DJR_UNIVERSAL_PORTAL_NAV_V3
   - Quick Actions
   - App Library
   - notification feed
   - account drawer
   - staff bulletin system
   - Owner / Staff permissions
   - bottom navigation
   - module system

   DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   ========================================================== */


/* ==========================================================
   1. GLOBAL UPPER BRAND STRIP
   ========================================================== */

body.djr-owner-portal .site-header,
body.djr-staff-portal .site-header {
  position: relative !important;

  min-height: 92px !important;

  padding:
    max(16px, env(safe-area-inset-top))
    22px
    15px !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

  border: 0 !important;
  border-bottom:
    1px solid
    rgba(114,155,218,.16) !important;

  background:
    radial-gradient(
      circle at 92% 17%,
      rgba(35,92,160,.27) 0,
      rgba(35,92,160,.27) 67px,
      transparent 68px
    ),
    radial-gradient(
      circle at 95% 21%,
      transparent 0,
      transparent 98px,
      rgba(73,124,195,.13) 99px,
      rgba(73,124,195,.13) 134px,
      transparent 135px
    ),
    linear-gradient(
      145deg,
      #07152c 0%,
      #092143 68%,
      #0c2950 100%
    ) !important;
}


body.djr-owner-portal .site-header .header-inner,
body.djr-staff-portal .site-header .header-inner {
  width: min(1180px, 100%) !important;
  min-height: 58px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 14px !important;
}


body.djr-owner-portal .site-header .brand,
body.djr-staff-portal .site-header .brand {
  min-width: 0 !important;

  display: inline-flex !important;
  align-items: center !important;

  gap: 11px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #fff !important;

  text-decoration: none !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


.djr-shell-brand-logo {
  width: 43px !important;
  height: 43px !important;

  flex: 0 0 43px !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  border-radius: 11px !important;

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

  box-shadow:
    0 7px 19px
    rgba(0,0,0,.14) !important;
}


.djr-shell-brand-logo img {
  display: block !important;

  width: 88% !important;
  height: 88% !important;

  object-fit: contain !important;
}


.djr-shell-brand-copy {
  min-width: 0 !important;

  display: grid !important;

  gap: 2px !important;

  text-align: left !important;
}


.djr-shell-brand-copy strong {
  overflow: hidden !important;

  color:
    rgba(255,255,255,.96) !important;

  font-size: .72rem !important;
  font-weight: 800 !important;

  line-height: 1.05 !important;

  letter-spacing: .02em !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


.djr-shell-brand-copy small {
  color:
    rgba(207,220,244,.72) !important;

  font-size: .47rem !important;
  font-weight: 800 !important;

  line-height: 1 !important;

  letter-spacing: .16em !important;
}


/* Keep existing genuine header actions.
   Only refine their footprint. */

body.djr-owner-portal
.site-header
.djr-header-actions,

body.djr-staff-portal
.site-header
.djr-header-actions {
  position: relative !important;
  z-index: 4 !important;

  display: flex !important;
  align-items: center !important;

  gap: 5px !important;

  margin: 0 !important;
}


body.djr-owner-portal
.site-header
.djr-header-action,

body.djr-staff-portal
.site-header
.djr-header-action {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 50% !important;

  color: rgba(255,255,255,.80) !important;

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

  box-shadow: none !important;
}


/* ==========================================================
   2. ONE OWNER + STAFF HERO GEOMETRY
   ========================================================== */

body.djr-owner-portal
.djr-staff-portal-hero,

body.djr-staff-portal
.djr-staff-portal-hero {
  position: relative !important;

  width:
    min(
      1180px,
      calc(100% - 36px)
    ) !important;

  min-height: 250px !important;

  margin:
    28px
    auto
    30px !important;

  padding:
    26px
    26px
    76px !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(119,171,224,.22) !important;

  border-radius: 24px !important;

  color: #fff !important;

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(74,156,221,.20),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #0d315c 0%,
      #174d7e 56%,
      #18355f 100%
    ) !important;

  box-shadow:
    0 18px 46px
    rgba(12,31,69,.17) !important;
}


/* Retire visual interference from historical glow,
   without deleting its DOM contract. */

body.djr-owner-portal
.djr-staff-portal-hero__glow,

body.djr-staff-portal
.djr-staff-portal-hero__glow {
  position: absolute !important;

  width: 250px !important;
  height: 250px !important;

  top: -118px !important;
  right: -70px !important;

  border-radius: 50% !important;

  opacity: .40 !important;

  background:
    transparent !important;

  border:
    36px solid
    rgba(106,165,226,.10) !important;

  box-shadow:
    0 0 0
    38px
    rgba(72,137,207,.07) !important;

  pointer-events: none !important;
}


/* ==========================================================
   3. IDENTITY LAYOUT
   ========================================================== */

body.djr-owner-portal
.djr-staff-portal-identity,

body.djr-staff-portal
.djr-staff-portal-identity {
  position: relative !important;

  z-index: 2 !important;

  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;

  grid-template-columns:
    148px
    minmax(0,1fr) !important;

  align-items: center !important;

  gap: 28px !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
}


/* Large circular photograph from the Canva reference. */

body.djr-owner-portal
.djr-staff-portal-avatar-link,

body.djr-staff-portal
.djr-staff-portal-avatar-link {
  display: block !important;

  width: 148px !important;
  height: 148px !important;

  margin: 0 !important;

  border-radius: 50% !important;

  text-decoration: none !important;
}


body.djr-owner-portal
.djr-staff-portal-avatar,

body.djr-staff-portal
.djr-staff-portal-avatar {
  width: 148px !important;
  height: 148px !important;

  min-width: 148px !important;
  min-height: 148px !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  padding: 0 !important;

  box-sizing: border-box !important;

  border:
    3px solid
    rgba(173,115,255,.92) !important;

  border-radius: 50% !important;

  color: #fff !important;

  background:
    linear-gradient(
      145deg,
      #7e4bf1,
      #4b31bd
    ) !important;

  box-shadow:
    0 9px 26px
    rgba(34,17,95,.24),
    inset
    0
    0
    0
    2px
    rgba(255,255,255,.18) !important;

  font-size: 2.15rem !important;
  font-weight: 900 !important;

  line-height: 1 !important;
}


body.djr-owner-portal
.djr-staff-portal-avatar
.djr-member-profile-avatar__image,

body.djr-staff-portal
.djr-staff-portal-avatar
.djr-member-profile-avatar__image {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: cover !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: inherit !important;
}


/* Right-side identity copy */

body.djr-owner-portal
.djr-staff-portal-identity__copy,

body.djr-staff-portal
.djr-staff-portal-identity__copy {
  min-width: 0 !important;

  display: grid !important;

  align-content: center !important;

  gap: 5px !important;

  margin: 0 !important;
  padding: 0 !important;
}


body.djr-owner-portal
.djr-member-profile-kicker,

body.djr-staff-portal
.djr-member-profile-kicker {
  margin: 0 !important;

  color: #a9d5ff !important;

  font-size: .61rem !important;
  font-weight: 900 !important;

  line-height: 1.1 !important;

  letter-spacing: .18em !important;

  text-transform: uppercase !important;
}


body.djr-owner-portal
.djr-staff-portal-name,

body.djr-staff-portal
.djr-staff-portal-name {
  margin: 0 !important;

  color: #fff !important;

  font-size:
    clamp(
      1.62rem,
      4vw,
      2.35rem
    ) !important;

  font-weight: 850 !important;

  line-height: 1.02 !important;

  letter-spacing: -.035em !important;
}


body.djr-owner-portal
.djr-staff-portal-role,

body.djr-staff-portal
.djr-staff-portal-role {
  margin: 2px 0 0 !important;

  color:
    rgba(235,243,255,.90) !important;

  font-size: .78rem !important;
  font-weight: 550 !important;

  line-height: 1.3 !important;
}


body.djr-owner-portal
.djr-staff-portal-welcome,

body.djr-staff-portal
.djr-staff-portal-welcome {
  max-width: 540px !important;

  margin:
    8px
    0
    0 !important;

  color:
    rgba(210,225,245,.74) !important;

  font-size: .75rem !important;

  line-height: 1.48 !important;
}


/* ==========================================================
   4. UNIVERSAL MENU BECOMES HERO FOOTER
   ========================================================== */

body.djr-owner-portal
.djr-staff-portal-hero
.djr-universal-nav-v3,

body.djr-staff-portal
.djr-staff-portal-hero
.djr-universal-nav-v3 {
  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  min-height: 58px !important;

  margin: 0 !important;
  padding:
    8px
    14px !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-top:
    1px solid
    rgba(255,255,255,.14) !important;

  border-radius:
    0
    0
    23px
    23px !important;

  background:
    linear-gradient(
      100deg,
      #315cba 0%,
      #704be8 54%,
      #8d35db 100%
    ) !important;

  box-shadow:
    inset
    0
    1px
    0
    rgba(255,255,255,.12) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Quick Actions lightning button remains its own circular
   leading control but now sits naturally in the footer. */

body.djr-owner-portal
.djr-universal-nav-v3__quick,

body.djr-staff-portal
.djr-universal-nav-v3__quick {
  width: 43px !important;
  min-width: 43px !important;

  height: 43px !important;
  min-height: 43px !important;

  margin: 0 !important;

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

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

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(255,255,255,.08) !important;
}


/* ==========================================================
   5. MOBILE — MATCH PROVIDED CANVA PROPORTIONS
   ========================================================== */

@media (max-width: 620px) {

  body.djr-owner-portal .site-header,
  body.djr-staff-portal .site-header {
    min-height: 82px !important;

    padding:
      max(12px, env(safe-area-inset-top))
      18px
      12px !important;
  }


  .djr-shell-brand-logo {
    width: 37px !important;
    height: 37px !important;

    flex-basis: 37px !important;

    border-radius: 9px !important;
  }


  .djr-shell-brand-copy strong {
    font-size: .65rem !important;
  }


  .djr-shell-brand-copy small {
    font-size: .42rem !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-hero,

  body.djr-staff-portal
  .djr-staff-portal-hero {
    width:
      calc(100% - 34px) !important;

    min-height: 214px !important;

    margin:
      22px
      auto
      26px !important;

    padding:
      23px
      21px
      65px !important;

    border-radius: 20px !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-identity,

  body.djr-staff-portal
  .djr-staff-portal-identity {
    grid-template-columns:
      108px
      minmax(0,1fr) !important;

    gap: 22px !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-avatar-link,

  body.djr-staff-portal
  .djr-staff-portal-avatar-link,

  body.djr-owner-portal
  .djr-staff-portal-avatar,

  body.djr-staff-portal
  .djr-staff-portal-avatar {
    width: 108px !important;
    height: 108px !important;

    min-width: 108px !important;
    min-height: 108px !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-name,

  body.djr-staff-portal
  .djr-staff-portal-name {
    font-size:
      clamp(
        1.38rem,
        6.5vw,
        1.8rem
      ) !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-role,

  body.djr-staff-portal
  .djr-staff-portal-role {
    font-size: .66rem !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-welcome,

  body.djr-staff-portal
  .djr-staff-portal-welcome {
    display: none !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-hero
  .djr-universal-nav-v3,

  body.djr-staff-portal
  .djr-staff-portal-hero
  .djr-universal-nav-v3 {
    min-height: 52px !important;

    padding:
      6px
      10px !important;

    border-radius:
      0
      0
      19px
      19px !important;
  }


  body.djr-owner-portal
  .djr-universal-nav-v3__quick,

  body.djr-staff-portal
  .djr-universal-nav-v3__quick {
    width: 38px !important;
    min-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
  }

}


@media (max-width: 390px) {

  body.djr-owner-portal
  .djr-staff-portal-identity,

  body.djr-staff-portal
  .djr-staff-portal-identity {
    grid-template-columns:
      94px
      minmax(0,1fr) !important;

    gap: 17px !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-avatar-link,

  body.djr-staff-portal
  .djr-staff-portal-avatar-link,

  body.djr-owner-portal
  .djr-staff-portal-avatar,

  body.djr-staff-portal
  .djr-staff-portal-avatar {
    width: 94px !important;
    height: 94px !important;

    min-width: 94px !important;
    min-height: 94px !important;
  }

}


/* ==========================================================
   DJR_UNIFIED_PORTAL_SHELL_CANVA_V1_END
   ========================================================== */


/* ==========================================================
   DJR_UNIFIED_PORTAL_SHELL_CANVA_V2_WIDTH_START

   Responsive geometry refinement only.
   Keeps all V1 functionality and component contracts intact.

   DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   ========================================================== */


/* ----------------------------------------------------------
   HERO WIDTH AUTHORITY

   Mobile:
   almost full viewport width.

   Tablet/Desktop:
   progressively wider while retaining a sensible ceiling.
   ---------------------------------------------------------- */

body.djr-owner-portal
.djr-staff-portal-hero,

body.djr-staff-portal
.djr-staff-portal-hero {
  width:
    min(
      1240px,
      calc(100vw - 24px)
    ) !important;

  max-width:
    calc(100vw - 24px) !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


/* ----------------------------------------------------------
   GIVE IDENTITY CONTENT MORE ROOM

   Avatar remains strong, but copy receives more usable width.
   ---------------------------------------------------------- */

body.djr-owner-portal
.djr-staff-portal-identity,

body.djr-staff-portal
.djr-staff-portal-identity {
  grid-template-columns:
    clamp(116px, 17vw, 148px)
    minmax(0, 1fr) !important;

  gap:
    clamp(
      18px,
      3.5vw,
      32px
    ) !important;
}


/* Avatar scales naturally with the wider card. */

body.djr-owner-portal
.djr-staff-portal-avatar-link,

body.djr-staff-portal
.djr-staff-portal-avatar-link,

body.djr-owner-portal
.djr-staff-portal-avatar,

body.djr-staff-portal
.djr-staff-portal-avatar {
  width:
    clamp(
      116px,
      17vw,
      148px
    ) !important;

  height:
    clamp(
      116px,
      17vw,
      148px
    ) !important;

  min-width: 0 !important;
  min-height: 0 !important;
}


/* ----------------------------------------------------------
   UNIVERSAL NAV

   Let the footer consume the newly available width naturally.
   ---------------------------------------------------------- */

body.djr-owner-portal
.djr-staff-portal-hero
.djr-universal-nav-v3,

body.djr-staff-portal
.djr-staff-portal-hero
.djr-universal-nav-v3 {
  width: 100% !important;

  max-width: none !important;

  padding-left:
    clamp(
      10px,
      2.2vw,
      18px
    ) !important;

  padding-right:
    clamp(
      10px,
      2.2vw,
      18px
    ) !important;

  gap:
    clamp(
      5px,
      1.5vw,
      12px
    ) !important;
}


/*
 * Allow the action pills to breathe instead of retaining
 * historical narrow widths.
 */

body.djr-owner-portal
.djr-universal-nav-v3__pill,

body.djr-staff-portal
.djr-universal-nav-v3__pill {
  min-width: 0 !important;

  padding-left:
    clamp(
      14px,
      3.2vw,
      28px
    ) !important;

  padding-right:
    clamp(
      14px,
      3.2vw,
      28px
    ) !important;
}


/* ----------------------------------------------------------
   NORMAL PHONE WIDTH
   ---------------------------------------------------------- */

@media (max-width: 620px) {

  body.djr-owner-portal
  .djr-staff-portal-hero,

  body.djr-staff-portal
  .djr-staff-portal-hero {
    width:
      calc(100vw - 20px) !important;

    max-width:
      calc(100vw - 20px) !important;

    margin-top:
      22px !important;

    margin-bottom:
      26px !important;

    padding-left:
      clamp(
        18px,
        4.5vw,
        24px
      ) !important;

    padding-right:
      clamp(
        18px,
        4.5vw,
        24px
      ) !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-identity,

  body.djr-staff-portal
  .djr-staff-portal-identity {
    grid-template-columns:
      clamp(
        104px,
        29vw,
        124px
      )
      minmax(0,1fr) !important;

    gap:
      clamp(
        17px,
        4vw,
        23px
      ) !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-avatar-link,

  body.djr-staff-portal
  .djr-staff-portal-avatar-link,

  body.djr-owner-portal
  .djr-staff-portal-avatar,

  body.djr-staff-portal
  .djr-staff-portal-avatar {
    width:
      clamp(
        104px,
        29vw,
        124px
      ) !important;

    height:
      clamp(
        104px,
        29vw,
        124px
      ) !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-name,

  body.djr-staff-portal
  .djr-staff-portal-name {
    font-size:
      clamp(
        1.46rem,
        6.4vw,
        1.92rem
      ) !important;
  }

}


/* ----------------------------------------------------------
   SMALL PHONES

   Still almost edge-to-edge but avoid text collision.
   ---------------------------------------------------------- */

@media (max-width: 390px) {

  body.djr-owner-portal
  .djr-staff-portal-hero,

  body.djr-staff-portal
  .djr-staff-portal-hero {
    width:
      calc(100vw - 16px) !important;

    max-width:
      calc(100vw - 16px) !important;

    padding-left:
      16px !important;

    padding-right:
      16px !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-identity,

  body.djr-staff-portal
  .djr-staff-portal-identity {
    grid-template-columns:
      96px
      minmax(0,1fr) !important;

    gap:
      15px !important;
  }


  body.djr-owner-portal
  .djr-staff-portal-avatar-link,

  body.djr-staff-portal
  .djr-staff-portal-avatar-link,

  body.djr-owner-portal
  .djr-staff-portal-avatar,

  body.djr-staff-portal
  .djr-staff-portal-avatar {
    width:
      96px !important;

    height:
      96px !important;
  }


  body.djr-owner-portal
  .djr-universal-nav-v3__pill,

  body.djr-staff-portal
  .djr-universal-nav-v3__pill {
    padding-left:
      11px !important;

    padding-right:
      11px !important;
  }

}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (min-width: 621px) and (max-width: 1024px) {

  body.djr-owner-portal
  .djr-staff-portal-hero,

  body.djr-staff-portal
  .djr-staff-portal-hero {
    width:
      calc(100vw - 36px) !important;

    max-width:
      980px !important;
  }

}


/* ----------------------------------------------------------
   DESKTOP / WIDE VIEWPORT

   Don't leave the hero looking like a mobile card floating
   in the middle of a huge page.
   ---------------------------------------------------------- */

@media (min-width: 1025px) {

  body.djr-owner-portal
  .djr-staff-portal-hero,

  body.djr-staff-portal
  .djr-staff-portal-hero {
    width:
      min(
        1240px,
        calc(100vw - 64px)
      ) !important;
  }

}


/* ==========================================================
   DJR_UNIFIED_PORTAL_SHELL_CANVA_V2_WIDTH_END
   ========================================================== */


/* ==========================================================
   DJR_UNIVERSAL_NOTIFICATION_FEED_V1_START
   DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   ========================================================== */


/*
 * Hero bell is the only visible notification launcher.
 * Legacy site-header Owner actions are removed at template level.
 */


/* Full viewport feed */

:where(html:not([data-owner-theme])) .djr-universal-nav-v3
.djr-notification-feed {
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  width: 100dvw !important;

  height: 100vh !important;
  height: 100dvh !important;

  max-width: none !important;
  max-height: none !important;

  z-index: 2147483600 !important;

  display: grid !important;
  grid-template-rows:
    auto
    minmax(0,1fr)
    auto !important;

  overflow: hidden !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    linear-gradient(
      155deg,
      rgba(246,247,255,.995),
      rgba(238,237,255,.995) 58%,
      rgba(232,244,255,.995)
    ) !important;

  box-shadow: none !important;

  backdrop-filter:
    blur(20px) !important;

  -webkit-backdrop-filter:
    blur(20px) !important;
}


:where(html:not([data-owner-theme])) .djr-universal-nav-v3
.djr-notification-feed[hidden] {
  display: none !important;
}


/*
 * Header gets safe-area clearance on iPhone.
 */

:where(html:not([data-owner-theme])) .djr-universal-nav-v3
.djr-notification-feed > header {
  min-height:
    calc(
      76px
      + env(safe-area-inset-top)
    ) !important;

  padding:
    calc(
      18px
      + env(safe-area-inset-top)
    )
    clamp(20px,5vw,46px)
    17px !important;

  box-sizing: border-box !important;

  border-bottom:
    1px
    solid
    rgba(103,75,190,.13) !important;

  background:
    linear-gradient(
      135deg,
      rgba(244,242,255,.98),
      rgba(232,244,255,.98)
    ) !important;
}


:where(html:not([data-owner-theme])) .djr-universal-nav-v3
.djr-notification-feed > header small {
  color:
    #7045df !important;

  font-size:
    .65rem !important;

  letter-spacing:
    .15em !important;
}


:where(html:not([data-owner-theme])) .djr-universal-nav-v3
.djr-notification-feed > header strong {
  color:
    #18243c !important;

  font-size:
    clamp(
      1.25rem,
      4vw,
      1.6rem
    ) !important;
}


/*
 * Scrollable notification timeline.
 */

:where(html:not([data-owner-theme])) .djr-universal-nav-v3
.djr-notification-feed__list {
  max-height: none !important;

  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding:
    12px
    clamp(
      12px,
      3vw,
      28px
    )
    24px !important;

  overscroll-behavior:
    contain !important;

  -webkit-overflow-scrolling:
    touch !important;
}


:where(html:not([data-owner-theme])) .djr-universal-nav-v3
.djr-notification-item {
  width:
    min(
      760px,
      100%
    ) !important;

  margin:
    0
    auto !important;

  border-radius:
    18px !important;

  border-bottom:
    0 !important;

  margin-bottom:
    8px !important;

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

  box-shadow:
    0
    7px
    24px
    rgba(
      31,
      28,
      78,
      .055
    ) !important;
}


:where(html:not([data-owner-theme])) .djr-universal-nav-v3
.djr-notification-item.is-unread {
  background:
    rgba(
      245,
      241,
      255,
      .98
    ) !important;

  box-shadow:
    inset
    3px
    0
    #7045df,
    0
    7px
    24px
    rgba(
      31,
      28,
      78,
      .07
    ) !important;
}


/* Footer */

:where(html:not([data-owner-theme])) .djr-universal-nav-v3
.djr-notification-feed > footer {
  padding:
    12px
    clamp(
      16px,
      4vw,
      34px
    )
    max(
      14px,
      env(safe-area-inset-bottom)
    ) !important;

  border-top:
    1px
    solid
    rgba(
      103,
      75,
      190,
      .12
    ) !important;

  background:
    rgba(
      248,
      249,
      255,
      .96
    ) !important;
}


/* ==========================================================
   DJR_UNIVERSAL_NOTIFICATION_FEED_V1_END
   ========================================================== */


/* ==========================================================
   DJR_UNIVERSAL_SERVICE_MENU_V1_START
   ========================================================== */

.djr-universal-service-menu {
  width:
    min(
      310px,
      calc(100vw - 28px)
    ) !important;

  padding:
    10px !important;

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

  border-radius:
    20px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(244,241,255,.99)
    ) !important;

  box-shadow:
    0
    22px
    55px
    rgba(17,25,59,.27) !important;
}


.djr-universal-service-menu > header {
  padding:
    10px
    10px
    11px !important;
}


.djr-universal-service-menu__settings {
  appearance: none !important;

  width: 100% !important;

  display: grid !important;

  grid-template-columns:
    32px
    minmax(0,1fr)
    auto !important;

  align-items: center !important;

  gap: 10px !important;

  padding:
    11px
    12px !important;

  border: 0 !important;

  border-radius:
    13px !important;

  color:
    #2c3850 !important;

  background:
    transparent !important;

  font: inherit !important;

  text-align:
    left !important;

  cursor:
    pointer !important;
}


.djr-universal-service-menu__settings:hover,
.djr-universal-service-menu__settings:focus-visible {
  background:
    rgba(112,69,223,.07) !important;

  outline:
    none !important;
}


.djr-universal-service-menu__settings > span:nth-child(2) {
  display: grid !important;

  gap:
    1px !important;
}


.djr-universal-service-menu__settings strong {
  font-size:
    .79rem !important;
}


.djr-universal-service-menu__settings small {
  color:
    #8a92a5 !important;

  font-size:
    .63rem !important;
}


.djr-universal-service-menu__settings > b {
  color:
    #7045df !important;

  font-size:
    1rem !important;
}


/* ==========================================================
   DJR_UNIVERSAL_SERVICE_MENU_V1_END
   ========================================================== */


/* ==========================================================
   DJR_CANVA_HEADER_PROFILE_AVATAR_V2_START

   Canva-reference refinement:
   - larger / more prominent profile photograph
   - no purple frame/ring
   - preserve circular crop
   - Owner + Staff
   - DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   ========================================================== */

body .djr-staff-portal-hero
.djr-staff-portal-avatar-link {
  display: block !important;

  width: clamp(126px, 20vw, 174px) !important;
  height: clamp(126px, 20vw, 174px) !important;

  min-width: clamp(126px, 20vw, 174px) !important;

  border: 0 !important;
  border-radius: 50% !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;
}


body .djr-staff-portal-hero
.djr-staff-portal-avatar {
  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  border-radius: 50% !important;

  padding: 0 !important;
  margin: 0 !important;

  background-clip: padding-box !important;

  box-shadow:
    0 16px 34px rgba(3, 15, 39, .24) !important;

  overflow: hidden !important;
}


body .djr-staff-portal-hero
.djr-staff-portal-avatar::before,

body .djr-staff-portal-hero
.djr-staff-portal-avatar::after,

body .djr-staff-portal-hero
.djr-staff-portal-avatar-link::before,

body .djr-staff-portal-hero
.djr-staff-portal-avatar-link::after {
  content: none !important;
  display: none !important;
}


body .djr-staff-portal-hero
.djr-staff-portal-avatar
.djr-member-profile-avatar__image,

body .djr-staff-portal-hero
.djr-staff-portal-avatar > img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  border: 0 !important;
  border-radius: 50% !important;

  object-fit: cover !important;
  object-position: center !important;

  transform: none !important;
}


/*
 * Give the image the prominence from the Canva reference
 * without crushing the identity copy beside it.
 */

body .djr-staff-portal-hero
.djr-staff-portal-identity {
  grid-template-columns:
    clamp(126px, 20vw, 174px)
    minmax(0, 1fr) !important;

  column-gap:
    clamp(22px, 4vw, 42px) !important;

  align-items: center !important;
}


/*
 * Large phones / tablets.
 */

@media (min-width: 700px) {

  body .djr-staff-portal-hero
  .djr-staff-portal-avatar-link {
    width: 180px !important;
    height: 180px !important;
    min-width: 180px !important;
  }

  body .djr-staff-portal-hero
  .djr-staff-portal-identity {
    grid-template-columns:
      180px
      minmax(0, 1fr) !important;

    column-gap: 44px !important;
  }

}


/*
 * Narrow phones still keep a substantial photo while
 * protecting Daniel / Staff identity text from wrapping badly.
 */

@media (max-width: 430px) {

  body .djr-staff-portal-hero
  .djr-staff-portal-avatar-link {
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
  }

  body .djr-staff-portal-hero
  .djr-staff-portal-identity {
    grid-template-columns:
      118px
      minmax(0, 1fr) !important;

    column-gap: 18px !important;
  }

}


/* ==========================================================
   DJR_CANVA_HEADER_PROFILE_AVATAR_V2_END
   ========================================================== */


/* ==========================================================
   DJR_CANVA_HEADER_PROFILE_AVATAR_V3_START

   FINAL AVATAR GEOMETRY AUTHORITY
   DJR_STAFF_PURPLE_GRADIENT_THEME_V1

   Target:
   - substantially larger portrait
   - approximately Canva-reference / marked-circle scale
   - circular
   - NO purple frame
   - cannot be shrunk by historical hero rules
   - Owner + Staff
   ========================================================== */


/* ----------------------------------------------------------
   IDENTITY GRID

   Give the portrait a genuinely reserved column.
   Do not allow CSS grid/flex compression to shrink it.
   ---------------------------------------------------------- */

body .djr-staff-portal-hero
.djr-staff-portal-identity {

  --djr-hero-avatar-size:
    clamp(
      154px,
      21vw,
      190px
    );

  display: grid !important;

  grid-template-columns:
    var(--djr-hero-avatar-size)
    minmax(0, 1fr) !important;

  column-gap:
    clamp(
      24px,
      4vw,
      46px
    ) !important;

  align-items: center !important;

  width: 100% !important;

  min-width: 0 !important;
}


/* ----------------------------------------------------------
   AVATAR LINK / OUTER GEOMETRY
   ---------------------------------------------------------- */

body .djr-staff-portal-hero
.djr-staff-portal-identity
.djr-staff-portal-avatar-link {

  display: block !important;

  width:
    var(--djr-hero-avatar-size) !important;

  height:
    var(--djr-hero-avatar-size) !important;

  min-width:
    var(--djr-hero-avatar-size) !important;

  min-height:
    var(--djr-hero-avatar-size) !important;

  max-width:
    var(--djr-hero-avatar-size) !important;

  max-height:
    var(--djr-hero-avatar-size) !important;

  flex:
    0
    0
    var(--djr-hero-avatar-size) !important;

  place-self: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  border-radius: 50% !important;

  background: transparent !important;

  box-shadow: none !important;

  overflow: visible !important;
}


/* ----------------------------------------------------------
   ACTUAL AVATAR

   This is intentionally an exact square rather than relying
   on inherited .djr-member-profile-avatar sizing.
   ---------------------------------------------------------- */

body .djr-staff-portal-hero
.djr-staff-portal-identity
.djr-staff-portal-avatar {

  display: grid !important;
  place-items: center !important;

  width:
    var(--djr-hero-avatar-size) !important;

  height:
    var(--djr-hero-avatar-size) !important;

  min-width:
    var(--djr-hero-avatar-size) !important;

  min-height:
    var(--djr-hero-avatar-size) !important;

  max-width:
    var(--djr-hero-avatar-size) !important;

  max-height:
    var(--djr-hero-avatar-size) !important;

  aspect-ratio: 1 / 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  border-radius: 50% !important;

  overflow: hidden !important;

  background-clip:
    padding-box !important;

  box-shadow:
    0
    18px
    42px
    rgba(2, 14, 36, .25) !important;
}


/* Remove ALL historical ring treatments. */

body .djr-staff-portal-hero
.djr-staff-portal-avatar::before,

body .djr-staff-portal-hero
.djr-staff-portal-avatar::after,

body .djr-staff-portal-hero
.djr-staff-portal-avatar-link::before,

body .djr-staff-portal-hero
.djr-staff-portal-avatar-link::after {

  content: none !important;

  display: none !important;
}


/* ----------------------------------------------------------
   UPLOADED PROFILE PHOTOGRAPH
   ---------------------------------------------------------- */

body .djr-staff-portal-hero
.djr-staff-portal-avatar
img,

body .djr-staff-portal-hero
.djr-staff-portal-avatar
.djr-member-profile-avatar__image {

  display: block !important;

  position: static !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  border-radius: 50% !important;

  object-fit: cover !important;
  object-position: center center !important;

  transform: none !important;
}


/* ----------------------------------------------------------
   TEXT COLUMN

   Keep the larger portrait from crushing identity copy.
   ---------------------------------------------------------- */

body .djr-staff-portal-hero
.djr-staff-portal-identity__copy {

  min-width: 0 !important;

  width: 100% !important;

  align-self: center !important;
}


/* ----------------------------------------------------------
   PHONE AUTHORITY

   Previous V2 dropped this to 118px.
   DO NOT shrink it that aggressively anymore.
   ---------------------------------------------------------- */

@media (max-width: 430px) {

  body .djr-staff-portal-hero
  .djr-staff-portal-identity {

    --djr-hero-avatar-size:
      clamp(
        148px,
        39vw,
        164px
      );

    grid-template-columns:
      var(--djr-hero-avatar-size)
      minmax(0, 1fr) !important;

    column-gap:
      clamp(
        18px,
        4.5vw,
        26px
      ) !important;
  }

}


/*
 * Very narrow phones need a slightly moderated size,
 * but still remain dramatically larger than the old avatar.
 */

@media (max-width: 360px) {

  body .djr-staff-portal-hero
  .djr-staff-portal-identity {

    --djr-hero-avatar-size:
      138px;

    column-gap:
      16px !important;
  }

}


/* ----------------------------------------------------------
   TABLET / DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 700px) {

  body .djr-staff-portal-hero
  .djr-staff-portal-identity {

    --djr-hero-avatar-size:
      clamp(
        180px,
        18vw,
        210px
      );
  }

}


/* ==========================================================
   DJR_CANVA_HEADER_PROFILE_AVATAR_V3_END
   ========================================================== */


/* ==========================================================
   DJR_BOTTOM_NAV_IOS_VISUAL_VIEWPORT_V1_START

   Position-only authority.

   IMPORTANT:
   This deliberately does NOT redefine:
   - width
   - height
   - gradient
   - border radius
   - navigation items
   - typography
   - routes
   - horizontal geometry

   Existing portal styling remains authoritative.
   ========================================================== */

.owner-nav.djr-bottom-nav-viewport-authority,

.member-jump-nav.djr-bottom-nav-viewport-authority,

.djr-staff-bottom-nav.djr-bottom-nav-viewport-authority,

[data-djr-staff-bottom-nav]
.djr-bottom-nav-viewport-authority,

[data-djr-bottom-nav]
.djr-bottom-nav-viewport-authority {

  position:
    fixed !important;

  top:
    auto !important;

  bottom:
    calc(
      var(
        --djr-nav-original-bottom,
        0px
      )
      +
      var(
        --djr-visual-viewport-bottom,
        0px
      )
    ) !important;

  /*
   * Force Safari to maintain this as its own compositor
   * surface rather than occasionally painting it into the
   * scrolling document layer.
   */
  transform:
    translate3d(
      0,
      0,
      0
    ) !important;

  -webkit-transform:
    translate3d(
      0,
      0,
      0
    ) !important;

  backface-visibility:
    hidden !important;

  -webkit-backface-visibility:
    hidden !important;

  will-change:
    transform !important;
}


/*
 * Historical viewport class may still be applied by
 * module-layout.js. It must never translate or reposition
 * the navigation vertically.
 */

.djr-staff-bottom-nav--viewport {

  position:
    fixed !important;

  top:
    auto !important;

  transform:
    translate3d(
      0,
      0,
      0
    ) !important;

  -webkit-transform:
    translate3d(
      0,
      0,
      0
    ) !important;
}


/* ==========================================================
   DJR_BOTTOM_NAV_IOS_VISUAL_VIEWPORT_V1_END
   ========================================================== */


/* ==========================================================
   DJR_STAFF_CANVA_SHELL_PARITY_V1_START

   FINAL STAFF DASHBOARD AUTHORITY

   Purpose:
   - Staff hero uses same clean Canva geometry as Owner
   - preserve Staff-specific content/routes/permissions
   - suppress historical member-dashboard toolbar geometry
   - keep large profile portrait
   - no impact on Owner dashboard
   ========================================================== */


/* ----------------------------------------------------------
   HERO CARD
   ---------------------------------------------------------- */

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero {

  width:
    calc(
      100%
      - clamp(
        18px,
        4vw,
        34px
      )
    ) !important;

  max-width:
    1180px !important;

  margin:
    clamp(
      42px,
      8vw,
      76px
    )
    auto
    clamp(
      58px,
      8vw,
      92px
    ) !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  border:
    1px
    solid
    rgba(
      103,
      174,
      231,
      .34
    ) !important;

  border-radius:
    clamp(
      22px,
      4vw,
      30px
    ) !important;

  background:
    linear-gradient(
      135deg,
      #114373 0%,
      #155587 48%,
      #124670 100%
    ) !important;

  box-shadow:
    0
    24px
    70px
    rgba(
      3,
      16,
      38,
      .20
    ) !important;
}


/* ----------------------------------------------------------
   IDENTITY SECTION
   ---------------------------------------------------------- */

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-staff-portal-identity {

  --djr-hero-avatar-size:
    clamp(
      148px,
      39vw,
      164px
    );

  display:
    grid !important;

  grid-template-columns:
    var(
      --djr-hero-avatar-size
    )
    minmax(
      0,
      1fr
    ) !important;

  align-items:
    center !important;

  column-gap:
    clamp(
      20px,
      4.5vw,
      30px
    ) !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    clamp(
      24px,
      5vw,
      42px
    )
    clamp(
      22px,
      4.5vw,
      42px
    )
    clamp(
      22px,
      4vw,
      36px
    ) !important;
}


/* ----------------------------------------------------------
   AVATAR
   ---------------------------------------------------------- */

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-staff-portal-avatar-link {

  display:
    block !important;

  width:
    var(
      --djr-hero-avatar-size
    ) !important;

  height:
    var(
      --djr-hero-avatar-size
    ) !important;

  min-width:
    var(
      --djr-hero-avatar-size
    ) !important;

  min-height:
    var(
      --djr-hero-avatar-size
    ) !important;

  max-width:
    var(
      --djr-hero-avatar-size
    ) !important;

  max-height:
    var(
      --djr-hero-avatar-size
    ) !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  outline:
    0 !important;

  border-radius:
    50% !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;
}


body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-staff-portal-avatar {

  display:
    grid !important;

  place-items:
    center !important;

  width:
    var(
      --djr-hero-avatar-size
    ) !important;

  height:
    var(
      --djr-hero-avatar-size
    ) !important;

  min-width:
    var(
      --djr-hero-avatar-size
    ) !important;

  min-height:
    var(
      --djr-hero-avatar-size
    ) !important;

  max-width:
    var(
      --djr-hero-avatar-size
    ) !important;

  max-height:
    var(
      --djr-hero-avatar-size
    ) !important;

  aspect-ratio:
    1 / 1 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  outline:
    0 !important;

  border-radius:
    50% !important;

  overflow:
    hidden !important;

  box-shadow:
    0
    18px
    42px
    rgba(
      2,
      14,
      36,
      .25
    ) !important;
}


body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-staff-portal-avatar
img,

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-staff-portal-avatar
.djr-member-profile-avatar__image {

  display:
    block !important;

  position:
    static !important;

  width:
    100% !important;

  height:
    100% !important;

  min-width:
    100% !important;

  min-height:
    100% !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;

  transform:
    none !important;
}


/* ----------------------------------------------------------
   TEXT COLUMN
   ---------------------------------------------------------- */

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-staff-portal-identity__copy {

  display:
    grid !important;

  align-content:
    center !important;

  gap:
    8px !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-member-profile-kicker {

  margin:
    0 !important;

  color:
    #acd9ff !important;

  font-size:
    clamp(
      .62rem,
      1.5vw,
      .74rem
    ) !important;

  font-weight:
    900 !important;

  letter-spacing:
    .22em !important;
}


body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-staff-portal-name {

  margin:
    0 !important;

  color:
    #fff !important;

  font-size:
    clamp(
      1.65rem,
      6vw,
      2.55rem
    ) !important;

  line-height:
    1.02 !important;

  letter-spacing:
    -.045em !important;
}


body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-staff-portal-role {

  margin:
    2px
    0
    0 !important;

  color:
    rgba(
      255,
      255,
      255,
      .86
    ) !important;

  font-size:
    clamp(
      .78rem,
      2.4vw,
      .95rem
    ) !important;

  line-height:
    1.3 !important;
}


/*
 * Match Owner mobile card: descriptive copy is not shown
 * on compact dashboard hero.
 */

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-staff-portal-welcome {

  display:
    none !important;
}


/* ----------------------------------------------------------
   UNIVERSAL ACTION BAR

   Old member-dashboard-specific toolbar definitions at
   ~9326-9488 must no longer define geometry.

   Universal V3 remains the one live functional controller.
   ---------------------------------------------------------- */

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-universal-nav-v3,

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-staff-portal-hero__actions.djr-universal-nav-v3 {

  position:
    relative !important;

  display:
    grid !important;

  grid-template-columns:
    clamp(
      48px,
      10vw,
      62px
    )
    minmax(
      0,
      1fr
    )
    minmax(
      0,
      1fr
    )
    clamp(
      48px,
      10vw,
      62px
    )
    clamp(
      48px,
      10vw,
      62px
    ) !important;

  align-items:
    center !important;

  gap:
    clamp(
      5px,
      1.4vw,
      10px
    ) !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    clamp(
      62px,
      13vw,
      78px
    ) !important;

  height:
    auto !important;

  margin:
    0 !important;

  padding:
    clamp(
      7px,
      1.8vw,
      11px
    )
    clamp(
      10px,
      2.4vw,
      18px
    ) !important;

  border:
    0 !important;

  border-top:
    1px
    solid
    rgba(
      255,
      255,
      255,
      .17
    ) !important;

  border-radius:
    0 !important;

  background:
    linear-gradient(
      100deg,
      #3766cc 0%,
      #6f43e6 50%,
      #a424ef 100%
    ) !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;
}


/*
 * Do not allow historical member-dashboard rules to create
 * separators/pseudo-elements between universal controls.
 */

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-universal-nav-v3
> *
::before,

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero
.djr-universal-nav-v3
> *
::after {

  content:
    none !important;
}


/* ----------------------------------------------------------
   RESPONSIVE GEOMETRY
   ---------------------------------------------------------- */

@media (max-width: 430px) {

  body.djr-staff-portal:has(.member-dashboard)
  .djr-staff-portal-hero {

    width:
      calc(
        100%
        - 22px
      ) !important;

    margin-top:
      40px !important;

    border-radius:
      24px !important;
  }


  body.djr-staff-portal:has(.member-dashboard)
  .djr-staff-portal-hero
  .djr-staff-portal-identity {

    --djr-hero-avatar-size:
      clamp(
        144px,
        39vw,
        158px
      );

    grid-template-columns:
      var(
        --djr-hero-avatar-size
      )
      minmax(
        0,
        1fr
      ) !important;

    column-gap:
      clamp(
        18px,
        4vw,
        24px
      ) !important;

    padding:
      24px
      18px
      22px !important;
  }

}


@media (max-width: 365px) {

  body.djr-staff-portal:has(.member-dashboard)
  .djr-staff-portal-hero
  .djr-staff-portal-identity {

    --djr-hero-avatar-size:
      132px;

    column-gap:
      15px !important;
  }


  body.djr-staff-portal:has(.member-dashboard)
  .djr-staff-portal-hero
  .djr-staff-portal-name {

    font-size:
      1.5rem !important;
  }

}


/* ==========================================================
   DJR_STAFF_CANVA_SHELL_PARITY_V1_END
   ========================================================== */


/* ==========================================================
   DJR_STAFF_HERO_WIDTH_PARITY_V2_START

   FINAL STAFF WIDTH AUTHORITY

   Staff hero must use the same near-full viewport width
   behaviour as the Owner Canva shell.

   Owner remains untouched.
   ========================================================== */

body.djr-staff-portal:has(.member-dashboard)
.djr-staff-portal-hero {

  box-sizing:
    border-box !important;

  width:
    calc(
      100vw
      - 22px
    ) !important;

  max-width:
    1180px !important;

  min-width:
    0 !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


/*
 * Prevent an older dashboard wrapper from constraining
 * the Staff hero to the narrower content column.
 */

body.djr-staff-portal:has(.member-dashboard)
.member-dashboard {

  width:
    100% !important;

  max-width:
    none !important;
}


body.djr-staff-portal:has(.member-dashboard)
.member-dashboard
> .djr-staff-portal-hero {

  width:
    calc(
      100vw
      - 22px
    ) !important;

  max-width:
    1180px !important;

  margin-left:
    50% !important;

  margin-right:
    0 !important;

  transform:
    translateX(
      -50%
    ) !important;
}


/*
 * Phone geometry.
 *
 * Keep only a very small gutter, matching Owner.
 */

@media (max-width: 699px) {

  body.djr-staff-portal:has(.member-dashboard)
  .djr-staff-portal-hero,

  body.djr-staff-portal:has(.member-dashboard)
  .member-dashboard
  > .djr-staff-portal-hero {

    width:
      calc(
        100vw
        - 20px
      ) !important;

    max-width:
      calc(
        100vw
        - 20px
      ) !important;
  }

}


/*
 * Very narrow devices retain enough breathing room
 * to avoid touching the screen edges.
 */

@media (max-width: 360px) {

  body.djr-staff-portal:has(.member-dashboard)
  .djr-staff-portal-hero,

  body.djr-staff-portal:has(.member-dashboard)
  .member-dashboard
  > .djr-staff-portal-hero {

    width:
      calc(
        100vw
        - 16px
      ) !important;

    max-width:
      calc(
        100vw
        - 16px
      ) !important;
  }

}


/* ==========================================================
   DJR_STAFF_HERO_WIDTH_PARITY_V2_END
   ========================================================== */


/* ==========================================================
   DJR_FULLSCREEN_MENU_TRAYS_V1_START

   APP LIBRARY VISUAL LANGUAGE

   Presentation-only authority for:
   - Quick Actions
   - Account
   - Bulletins
   - Notifications
   - service/settings tray where applicable

   Existing:
   - routes
   - forms
   - JavaScript
   - permissions
   - data attributes
   - notification logic
   - module logic

   remain untouched.
   ========================================================== */


/* ----------------------------------------------------------
   COMMON FULL-SCREEN ROOTS
   ---------------------------------------------------------- */

body > .djr-universal-quick-sheet,


body > .djr-account-drawer,


body > .djr-bulletin-drawer,
:where(html:not([data-owner-theme])) body > .djr-notification-feed,
:where(html:not([data-owner-theme])) body > .djr-notification-feed-panel,
:where(html:not([data-owner-theme])) body > [data-notification-menu],
:where(html:not([data-owner-theme])) body > [data-notification-feed],
:where(html:not([data-owner-theme])) body > [data-djr-notification-feed] {

  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    2147483646 !important;

  width:
    100vw !important;

  width:
    100dvw !important;

  height:
    100vh !important;

  height:
    100dvh !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  overflow:
    hidden !important;

  transform:
    none !important;

  background:
    linear-gradient(
      155deg,
      #eef3ff 0%,
      #e9edff 30%,
      #edf7ff 58%,
      #f5edff 78%,
      #eef3ff 100%
    ) !important;

  box-shadow:
    none !important;
}


/*
 * Preserve actual hidden state.
 */

body > .djr-universal-quick-sheet[hidden],


body > .djr-account-drawer[hidden],


body > .djr-bulletin-drawer[hidden],
:where(html:not([data-owner-theme])) body > .djr-notification-feed[hidden],
:where(html:not([data-owner-theme])) body > .djr-notification-feed-panel[hidden],
:where(html:not([data-owner-theme])) body > [data-notification-menu][hidden],
:where(html:not([data-owner-theme])) body > [data-notification-feed][hidden],
:where(html:not([data-owner-theme])) body > [data-djr-notification-feed][hidden] {

  display:
    none !important;
}


/* ----------------------------------------------------------
   APP-LIBRARY STYLE BACKGROUND GLOW
   ---------------------------------------------------------- */

body > .djr-universal-quick-sheet::before,


body > .djr-account-drawer::before,


body > .djr-bulletin-drawer::before,
:where(html:not([data-owner-theme])) body > .djr-notification-feed::before,
:where(html:not([data-owner-theme])) body > .djr-notification-feed-panel::before,
:where(html:not([data-owner-theme])) body > [data-notification-menu]::before,
:where(html:not([data-owner-theme])) body > [data-notification-feed]::before,
:where(html:not([data-owner-theme])) body > [data-djr-notification-feed]::before {

  content:
    "" !important;

  position:
    fixed !important;

  inset:
    0 !important;

  pointer-events:
    none !important;

  background:
    radial-gradient(
      circle at 13% 18%,
      rgba(112, 69, 239, .20),
      transparent 25%
    ),
    radial-gradient(
      circle at 88% 24%,
      rgba(46, 163, 239, .20),
      transparent 30%
    ),
    radial-gradient(
      circle at 72% 78%,
      rgba(191, 108, 246, .16),
      transparent 30%
    ),
    radial-gradient(
      circle at 15% 92%,
      rgba(48, 166, 244, .18),
      transparent 29%
    ) !important;

  z-index:
    0 !important;
}


/* ----------------------------------------------------------
   REMOVE OLD MODAL DIM/BACKDROP APPEARANCE
   ---------------------------------------------------------- */

body > .djr-universal-quick-sheet
.djr-universal-quick-sheet__backdrop,

body > .djr-account-drawer
.djr-account-drawer__backdrop,

body > .djr-bulletin-drawer
.djr-bulletin-drawer__backdrop {

  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    0 !important;

  background:
    transparent !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  opacity:
    1 !important;
}


/* ----------------------------------------------------------
   COMMON INNER PAGE / PANEL GEOMETRY
   ---------------------------------------------------------- */

body > .djr-universal-quick-sheet
.djr-universal-quick-sheet__panel,

body > .djr-account-drawer
.djr-account-drawer__shell,

body > .djr-bulletin-drawer
.djr-bulletin-drawer__sheet {

  position:
    relative !important;

  inset:
    auto !important;

  z-index:
    1 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  width:
    100% !important;

  height:
    100% !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    max(
      22px,
      calc(
        env(safe-area-inset-top)
        + 16px
      )
    )
    clamp(
      22px,
      5vw,
      52px
    )
    max(
      28px,
      calc(
        env(safe-area-inset-bottom)
        + 22px
      )
    ) !important;

  box-sizing:
    border-box !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  overflow:
    hidden auto !important;

  -webkit-overflow-scrolling:
    touch !important;

  overscroll-behavior:
    contain !important;
}


/* ----------------------------------------------------------
   QUICK ACTIONS

   Convert existing bottom sheet directly into workspace page.
   ---------------------------------------------------------- */

body > .djr-universal-quick-sheet {

  display:
    block !important;

  align-items:
    initial !important;

  justify-content:
    initial !important;
}


body > .djr-universal-quick-sheet[hidden] {

  display:
    none !important;
}


body > .djr-universal-quick-sheet
.djr-universal-quick-sheet__panel {

  padding-top:
    max(
      34px,
      calc(
        env(safe-area-inset-top)
        + 26px
      )
    ) !important;
}


/*
 * Quick Action title area gets App Library hierarchy.
 */

body > .djr-universal-quick-sheet
.djr-universal-quick-sheet__header {

  flex:
    0 0 auto !important;

  width:
    100% !important;

  max-width:
    1180px !important;

  margin:
    0
    auto
    34px !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;
}


body > .djr-universal-quick-sheet
.djr-universal-quick-sheet__header small {

  color:
    #7045df !important;

  font-size:
    clamp(
      .72rem,
      2.5vw,
      .90rem
    ) !important;

  font-weight:
    900 !important;

  letter-spacing:
    .17em !important;

  text-transform:
    uppercase !important;
}


body > .djr-universal-quick-sheet
.djr-universal-quick-sheet__header strong {

  color:
    #111827 !important;

  font-size:
    clamp(
      2rem,
      8vw,
      3.25rem
    ) !important;

  line-height:
    .98 !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.045em !important;
}


/*
 * Quick Action slots become a clean App Library-style grid.
 */

body > .djr-universal-quick-sheet
.djr-universal-quick-sheet__slots {

  flex:
    0 0 auto !important;

  display:
    grid !important;

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

  gap:
    clamp(
      16px,
      4vw,
      34px
    ) !important;

  width:
    100% !important;

  max-width:
    760px !important;

  margin:
    12px
    auto
    auto !important;

  padding:
    0 !important;

  overflow:
    visible !important;
}


/* ----------------------------------------------------------
   LARGE APP-LIBRARY STYLE CLOSE BUTTONS
   ---------------------------------------------------------- */

body > .djr-universal-quick-sheet
[data-djr-universal-quick-close],

body > .djr-account-drawer
[data-account-drawer-close],

body > .djr-account-drawer
[data-djr-account-close],

body > .djr-bulletin-drawer
[data-bulletin-drawer-close],

body > .djr-bulletin-drawer
[data-djr-bulletin-close] {

  position:
    fixed !important;

  top:
    max(
      22px,
      calc(
        env(safe-area-inset-top)
        + 14px
      )
    ) !important;

  right:
    clamp(
      20px,
      5vw,
      48px
    ) !important;

  z-index:
    20 !important;

  display:
    grid !important;

  place-items:
    center !important;

  width:
    58px !important;

  height:
    58px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    20px !important;

  color:
    #7045df !important;

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

  box-shadow:
    0
    12px
    32px
    rgba(
      59,
      48,
      118,
      .10
    ) !important;

  backdrop-filter:
    blur(14px) !important;

  -webkit-backdrop-filter:
    blur(14px) !important;

  font-size:
    0 !important;
}


body > .djr-universal-quick-sheet
[data-djr-universal-quick-close]::after,

body > .djr-account-drawer
[data-account-drawer-close]::after,

body > .djr-account-drawer
[data-djr-account-close]::after,

body > .djr-bulletin-drawer
[data-bulletin-drawer-close]::after,

body > .djr-bulletin-drawer
[data-djr-bulletin-close]::after {

  content:
    "×" !important;

  display:
    block !important;

  color:
    #7045df !important;

  font-size:
    2.35rem !important;

  font-weight:
    450 !important;

  line-height:
    1 !important;
}


/* ----------------------------------------------------------
   ACCOUNT

   Remove old card/modal framing but leave all account
   content cards untouched.
   ---------------------------------------------------------- */

body > .djr-account-drawer
.djr-account-drawer__header {

  position:
    relative !important;

  top:
    auto !important;

  z-index:
    2 !important;

  flex:
    0 0 auto !important;

  width:
    100% !important;

  max-width:
    1180px !important;

  min-height:
    auto !important;

  margin:
    0
    auto
    28px !important;

  padding:
    0
    78px
    22px
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;
}


/* ----------------------------------------------------------
   BULLETINS
   ---------------------------------------------------------- */

body > .djr-bulletin-drawer
.djr-bulletin-drawer__sheet {

  padding-top:
    max(
      34px,
      calc(
        env(safe-area-inset-top)
        + 26px
      )
    ) !important;
}


body > .djr-bulletin-drawer
.djr-bulletin-drawer__header {

  position:
    relative !important;

  top:
    auto !important;

  z-index:
    2 !important;

  flex:
    0 0 auto !important;

  width:
    100% !important;

  max-width:
    1180px !important;

  margin:
    0
    auto
    28px !important;

  padding:
    0
    78px
    20px
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;
}


body > .djr-bulletin-drawer
.djr-bulletin-drawer__footer {

  position:
    relative !important;

  bottom:
    auto !important;

  margin-top:
    auto !important;

  padding:
    22px
    0
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;
}


/* ----------------------------------------------------------
   NOTIFICATIONS

   Existing notification feed has its own controller and
   scrolling behaviour. Only convert its visual container.
   ---------------------------------------------------------- */

:where(html:not([data-owner-theme])) .djr-notification-feed,
:where(html:not([data-owner-theme])) .djr-notification-feed-panel,
:where(html:not([data-owner-theme])) [data-notification-feed],
:where(html:not([data-owner-theme])) [data-djr-notification-feed] {

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}


/*
 * Any currently styled notification feed inner sheet should
 * behave as a full-height workspace rather than a modal card.
 */

:where(html:not([data-owner-theme])) .djr-notification-feed__panel,
:where(html:not([data-owner-theme])) .djr-notification-feed__sheet,
:where(html:not([data-owner-theme])) .djr-notification-menu,
:where(html:not([data-owner-theme])) .djr-notification-menu__panel {

  width:
    100% !important;

  height:
    100% !important;

  min-height:
    100% !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    max(
      28px,
      calc(
        env(safe-area-inset-top)
        + 20px
      )
    )
    clamp(
      22px,
      5vw,
      52px
    )
    max(
      28px,
      calc(
        env(safe-area-inset-bottom)
        + 20px
      )
    ) !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  overflow:
    hidden auto !important;

  -webkit-overflow-scrolling:
    touch !important;
}


/* ----------------------------------------------------------
   DESKTOP / TABLET CONTENT LIMIT

   The full-screen canvas remains full width while content
   receives a comfortable reading width.
   ---------------------------------------------------------- */

@media (min-width: 760px) {

  body > .djr-account-drawer
  .djr-account-drawer__shell,

  body > .djr-bulletin-drawer
  .djr-bulletin-drawer__sheet,

  body > .djr-universal-quick-sheet
  .djr-universal-quick-sheet__panel {

    padding-left:
      max(
        42px,
        calc(
          (
            100vw
            - 1180px
          )
          / 2
        )
      ) !important;

    padding-right:
      max(
        42px,
        calc(
          (
            100vw
            - 1180px
          )
          / 2
        )
      ) !important;
  }

}


/* ----------------------------------------------------------
   PHONE REFINEMENT
   ---------------------------------------------------------- */

@media (max-width: 520px) {

  body > .djr-universal-quick-sheet
  .djr-universal-quick-sheet__panel,

  body > .djr-account-drawer
  .djr-account-drawer__shell,

  body > .djr-bulletin-drawer
  .djr-bulletin-drawer__sheet {

    padding-left:
      20px !important;

    padding-right:
      20px !important;
  }


  body > .djr-universal-quick-sheet
  .djr-universal-quick-sheet__slots {

    gap:
      14px !important;
  }


  body > .djr-universal-quick-sheet
  [data-djr-universal-quick-close],

  body > .djr-account-drawer
  [data-account-drawer-close],

  body > .djr-account-drawer
  [data-djr-account-close],

  body > .djr-bulletin-drawer
  [data-bulletin-drawer-close],

  body > .djr-bulletin-drawer
  [data-djr-bulletin-close] {

    width:
      54px !important;

    height:
      54px !important;

    right:
      18px !important;
  }

}


/* ==========================================================
   DJR_FULLSCREEN_MENU_TRAYS_V1_END
   ========================================================== */


/* ==========================================================
   DJR_MODULE_ICON_SINGLE_AUTHORITY_V1_START

   ONE visual authority for StaffModule.icon / image.
   Dashboard, App Library and Quick Actions consume the same
   module object and therefore the same icon.
   ========================================================== */

.djr-module-app-icon {
  display: grid !important;
  place-items: center !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  color: inherit !important;

  line-height: 1 !important;

  overflow: hidden !important;
}


.djr-module-app-icon svg {
  display: block !important;

  width: 62% !important;
  height: 62% !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 1.8 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


.djr-module-app-icon__image {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: inherit !important;
}


/*
 * Canonical module-icon colour mapping.
 *
 * This deliberately colours the icon from the module's saved
 * visual identity instead of page-specific hardcoded glyphs.
 */

.djr-module-app-icon--spark {
  color: #15936e !important;
}

.djr-module-app-icon--grid {
  color: #7844e4 !important;
}

.djr-module-app-icon--check {
  color: #7246df !important;
}

.djr-module-app-icon--folder {
  color: #7045df !important;
}

.djr-module-app-icon--mail {
  color: #2389ce !important;
}

.djr-module-app-icon--chart {
  color: #7045df !important;
}

.djr-module-app-icon--people {
  color: #2586cb !important;
}

.djr-module-app-icon--tools {
  color: #7045df !important;
}


/*
 * The partial owns the glyph itself. Parent surfaces own only
 * the tile geometry/background.
 */

.djr-staff-module-card__icon
> .djr-module-app-icon,

.djr-owner-module-card__icon
> .djr-module-app-icon,

.djr-universal-quick-bubble__icon
> .djr-module-app-icon,

.djr-universal-quick-picker__icon
> .djr-module-app-icon {

  width: 100% !important;
  height: 100% !important;
}


/* ==========================================================
   DJR_MODULE_ICON_SINGLE_AUTHORITY_V1_END
   ========================================================== */


/* ==========================================================
   DJR_APP_LIBRARY_MODULE_LIBRARY_BUTTON_V1_START

   Owner App Library management shortcut.

   Requirements:
   - exists only for authenticated Owner template
   - VISUALLY appears only while App Library is open
   - bottom-right placement
   - mirrors Apps / Tiles pill language
   - does not alter App Library functionality
   ========================================================== */


.djr-app-library-module-library-button {
  display: none !important;
}


/*
 * App Library controller historically applies
 * djr-app-library-open to html and/or body.
 *
 * Support either without creating a second state system.
 */

html.djr-app-library-open
body.djr-owner-portal
.djr-app-library-module-library-button,

body.djr-owner-portal.djr-app-library-open
.djr-app-library-module-library-button {
  position: fixed !important;

  right:
    max(
      24px,
      calc(
        env(safe-area-inset-right)
        + 22px
      )
    ) !important;

  bottom:
    max(
      24px,
      calc(
        env(safe-area-inset-bottom)
        + 22px
      )
    ) !important;

  z-index:
    2147483635 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    10px !important;

  box-sizing:
    border-box !important;

  width:
    auto !important;

  min-width:
    178px !important;

  height:
    58px !important;

  min-height:
    58px !important;

  padding:
    0
    22px !important;

  margin:
    0 !important;

  border:
    2px
    solid
    rgba(112, 67, 224, .90) !important;

  border-radius:
    999px !important;

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

  color:
    #7043df !important;

  box-shadow:
    0
    12px
    34px
    rgba(74, 52, 168, .12),
    inset
    0
    1px
    0
    rgba(255,255,255,.92) !important;

  backdrop-filter:
    blur(18px)
    saturate(1.12) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(1.12) !important;

  text-decoration:
    none !important;

  -webkit-tap-highlight-color:
    transparent !important;

  transform:
    translate3d(0,0,0) !important;

  transition:
    transform .16s ease,
    background .16s ease,
    box-shadow .16s ease !important;
}


html.djr-app-library-open
body.djr-owner-portal
.djr-app-library-module-library-button:hover,

html.djr-app-library-open
body.djr-owner-portal
.djr-app-library-module-library-button:focus-visible,

body.djr-owner-portal.djr-app-library-open
.djr-app-library-module-library-button:hover,

body.djr-owner-portal.djr-app-library-open
.djr-app-library-module-library-button:focus-visible {
  background:
    rgba(255,255,255,.92) !important;

  box-shadow:
    0
    16px
    38px
    rgba(74, 52, 168, .18),
    inset
    0
    1px
    0
    rgba(255,255,255,1) !important;

  outline:
    none !important;
}


html.djr-app-library-open
body.djr-owner-portal
.djr-app-library-module-library-button:active,

body.djr-owner-portal.djr-app-library-open
.djr-app-library-module-library-button:active {
  transform:
    translate3d(0,2px,0)
    scale(.985) !important;
}


.djr-app-library-module-library-button__icon {
  display:
    grid !important;

  place-items:
    center !important;

  flex:
    0 0 22px !important;

  width:
    22px !important;

  height:
    22px !important;
}


.djr-app-library-module-library-button__icon svg {
  display:
    block !important;

  width:
    21px !important;

  height:
    21px !important;

  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    1.9 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;
}


.djr-app-library-module-library-button strong {
  font-size:
    .79rem !important;

  font-weight:
    850 !important;

  line-height:
    1 !important;

  letter-spacing:
    -.01em !important;

  white-space:
    nowrap !important;
}


/*
 * Phones:
 * retain the same Apps/Tiles-style pill proportions while
 * keeping clear of the screen edges and iOS safe area.
 */

@media (max-width: 520px) {

  html.djr-app-library-open
  body.djr-owner-portal
  .djr-app-library-module-library-button,

  body.djr-owner-portal.djr-app-library-open
  .djr-app-library-module-library-button {
    right:
      max(
        18px,
        calc(
          env(safe-area-inset-right)
          + 16px
        )
      ) !important;

    bottom:
      max(
        20px,
        calc(
          env(safe-area-inset-bottom)
          + 18px
        )
      ) !important;

    min-width:
      170px !important;

    height:
      54px !important;

    min-height:
      54px !important;

    padding:
      0
      19px !important;

    gap:
      9px !important;
  }

}


/* ==========================================================
   DJR_APP_LIBRARY_MODULE_LIBRARY_BUTTON_V1_END
   ========================================================== */


/* ==========================================================
   DJR_PORTAL_AMBIENT_VIDEO_V3_START

   SHELL BACKGROUND ONLY
   DJR_STAFF_PURPLE_GRADIENT_THEME_V1

   ABSOLUTE RULE:
   This controller does NOT style, resize or reposition:
   - .djr-staff-portal-hero
   - .djr-staff-portal-identity
   - avatar
   - identity copy
   - universal nav
   - dashboard modules

   The known-good pre-video hero remains authoritative.
   ========================================================== */


/*
 * Ambient layer is completely absent everywhere by default.
 */

.djr-portal-ambient-video {
  display: none;
}


/*
 * Show it ONLY on Owner / Staff dashboards which actually
 * contain the shared portal hero.
 *
 * It belongs to the BODY, not the hero.
 */

body.djr-owner-portal:has(.djr-staff-portal-hero)
> .djr-portal-ambient-video,

body.djr-staff-portal:has(.djr-staff-portal-hero)
> .djr-portal-ambient-video {

  display: block !important;

  position: absolute !important;

  /*
   * Starts immediately below the branded DJR top header.
   *
   * It then occupies the existing navy backdrop through which
   * the profile card visually passes.
   */
  top: 116px !important;

  right: 0 !important;
  left: 0 !important;

  width: 100% !important;

  height: 535px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  z-index: 0 !important;

  pointer-events: none !important;

  background: #07172f !important;

  border: 0 !important;

  contain: paint !important;
}


/*
 * The video itself.
 *
 * Absolutely fills ONLY the ambient shell rectangle.
 * It contributes ZERO height to the document.
 */

.djr-portal-ambient-video__media {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;

  object-position: center center !important;

  opacity: .30 !important;

  filter:
    brightness(.66)
    saturate(.88)
    contrast(1.04) !important;

  transform:
    scale(1.035)
    translate3d(0,0,0) !important;

  pointer-events: none !important;
}


/*
 * Navy wash keeps the existing DJR background language and
 * prevents the video becoming visually dominant.
 */

.djr-portal-ambient-video__shade {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(5,20,46,.34) 0%,
      rgba(5,20,46,.20) 38%,
      rgba(5,20,46,.28) 72%,
      rgba(5,20,46,.62) 100%
    ) !important;
}


/*
 * Stacking only.
 *
 * IMPORTANT:
 * position:relative and z-index do NOT change any existing
 * hero geometry.
 *
 * We do not set width/height/margin/padding/grid/etc.
 */

body.djr-owner-portal:has(.djr-staff-portal-hero)
.site-header,

body.djr-staff-portal:has(.djr-staff-portal-hero)
.site-header {

  position: relative !important;

  z-index: 2 !important;
}


body.djr-owner-portal:has(.djr-staff-portal-hero)
.djr-staff-portal-hero,

body.djr-staff-portal:has(.djr-staff-portal-hero)
.djr-staff-portal-hero {

  position: relative !important;

  z-index: 3 !important;
}


/*
 * The ordinary dashboard remains above the ambient layer.
 *
 * Again: stacking only, no geometry.
 */

body.djr-owner-portal:has(.djr-staff-portal-hero)
.member-dashboard,

body.djr-staff-portal:has(.djr-staff-portal-hero)
.member-dashboard {

  position: relative !important;

  z-index: 1 !important;
}


/*
 * Phone positioning.
 *
 * This recreates the navy/video field visible behind the hero:
 *
 * branded header
 * ----------------
 * ambient video/navy field
 *       [ profile card ]
 * ----------------
 * normal light dashboard
 */

@media (max-width: 700px) {

  body.djr-owner-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video,

  body.djr-staff-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video {

    top: 126px !important;

    height: 530px !important;
  }

}


@media (max-width: 390px) {

  body.djr-owner-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video,

  body.djr-staff-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video {

    top: 118px !important;

    height: 515px !important;
  }

}


@media (min-width: 701px) {

  body.djr-owner-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video,

  body.djr-staff-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video {

    top: 112px !important;

    height: 610px !important;
  }

}


/*
 * Respect reduced-motion preference.
 */

@media (prefers-reduced-motion: reduce) {

  .djr-portal-ambient-video__media {
    display: none !important;
  }

}


/* ==========================================================
   DJR_PORTAL_AMBIENT_VIDEO_V3_END
   ========================================================== */


/* ==========================================================
   DJR_PORTAL_AMBIENT_VIDEO_UPPER_CLIP_V4_START

   POSITION / CLIPPING AUTHORITY ONLY

   Purpose:
   - retain existing V3 body-level video
   - retain correct layering behind hero
   - STOP video at blue/light dashboard boundary
   - ZERO changes to hero/card geometry
   - Owner + Staff
   ========================================================== */


/*
 * PHONE / PWA
 *
 * Top begins immediately beneath branded header.
 * Height deliberately ends around the existing transition
 * from the dark portal shell into the light dashboard.
 *
 * The profile card is a separate layer above this.
 */

@media (max-width: 700px) {

  body.djr-owner-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video,

  body.djr-staff-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video {

    top: 126px !important;

    height: 205px !important;

    bottom: auto !important;

    overflow: hidden !important;

    clip-path:
      inset(
        0
        0
        0
        0
      ) !important;

    -webkit-clip-path:
      inset(
        0
        0
        0
        0
      ) !important;
  }

}


/*
 * Very narrow iPhones.
 */

@media (max-width: 390px) {

  body.djr-owner-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video,

  body.djr-staff-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video {

    top: 118px !important;

    height: 205px !important;
  }

}


/*
 * Larger mobile / tablet.
 */

@media (min-width: 701px) and (max-width: 1100px) {

  body.djr-owner-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video,

  body.djr-staff-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video {

    top: 112px !important;

    height: 250px !important;

    bottom: auto !important;

    overflow: hidden !important;
  }

}


/*
 * Desktop.
 */

@media (min-width: 1101px) {

  body.djr-owner-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video,

  body.djr-staff-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video {

    top: 112px !important;

    height: 285px !important;

    bottom: auto !important;

    overflow: hidden !important;
  }

}


/*
 * Critical containment.
 *
 * The media can cover its own layer but can NEVER escape it.
 */

body.djr-owner-portal
.djr-portal-ambient-video__media,

body.djr-staff-portal
.djr-portal-ambient-video__media {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  overflow: hidden !important;
}


/* ==========================================================
   DJR_PORTAL_AMBIENT_VIDEO_UPPER_CLIP_V4_END
   ========================================================== */


/* ==========================================================
   DJR_PORTAL_AMBIENT_VIDEO_FLUSH_BRIGHT_V5_START

   FINAL AMBIENT VIDEO POSITION / VISIBILITY AUTHORITY

   ONLY changes:
   - video begins immediately beneath .site-header
   - fills the complete upper navy stage
   - retains existing lower clipping boundary
   - increases video visibility

   DOES NOT MODIFY:
   - profile hero geometry
   - profile hero position
   - avatar
   - universal nav
   - dashboard
   - module grid
   - bottom navigation

   DJR_STAFF_PURPLE_GRADIENT_THEME_V1
   ========================================================== */


/* ----------------------------------------------------------
   AMBIENT CONTAINER

   The site header is the positioning authority.

   JS below writes the REAL rendered bottom edge of the
   branded header into --djr-ambient-video-top, avoiding
   guessed pixel offsets across iPhone / PWA / desktop.
   ---------------------------------------------------------- */

body.djr-owner-portal:has(.djr-staff-portal-hero)
> .djr-portal-ambient-video,

body.djr-staff-portal:has(.djr-staff-portal-hero)
> .djr-portal-ambient-video {

  top:
    var(
      --djr-ambient-video-top,
      126px
    ) !important;

  /*
   * V4's lower edge was correct.
   *
   * Therefore height is calculated against that same
   * absolute lower boundary rather than giving the video
   * another arbitrary fixed height.
   *
   * Phone target lower edge ~= 331px.
   */
  height:
    calc(
      331px
      -
      var(
        --djr-ambient-video-top,
        126px
      )
    ) !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  bottom:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  pointer-events:
    none !important;

  clip-path:
    inset(0) !important;

  -webkit-clip-path:
    inset(0) !important;
}


/* ----------------------------------------------------------
   VIDEO

   V3 used opacity around .30.
   Increase it substantially while still allowing the navy
   shell colour to influence the finished appearance.
   ---------------------------------------------------------- */

body.djr-owner-portal
> .djr-portal-ambient-video
.djr-portal-ambient-video__media,

body.djr-staff-portal
> .djr-portal-ambient-video
.djr-portal-ambient-video__media,

body.djr-owner-portal
> .djr-portal-ambient-video
video,

body.djr-staff-portal
> .djr-portal-ambient-video
video {

  position:
    absolute !important;

  inset:
    0 !important;

  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  min-width:
    100% !important;

  min-height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  opacity:
    .62 !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;

  /*
   * Slight brightness lift rather than washing the video
   * out with excessive opacity.
   */
  filter:
    brightness(1.18)
    saturate(1.12)
    contrast(1.04) !important;

  -webkit-filter:
    brightness(1.18)
    saturate(1.12)
    contrast(1.04) !important;
}


/* ----------------------------------------------------------
   TABLET

   Preserve V4's established lower clipping edge:
   112px + 250px = 362px.
   ---------------------------------------------------------- */

@media (min-width: 701px) and (max-width: 1100px) {

  body.djr-owner-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video,

  body.djr-staff-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video {

    height:
      calc(
        362px
        -
        var(
          --djr-ambient-video-top,
          112px
        )
      ) !important;
  }

}


/* ----------------------------------------------------------
   DESKTOP

   Preserve V4's established lower clipping edge:
   112px + 285px = 397px.
   ---------------------------------------------------------- */

@media (min-width: 1101px) {

  body.djr-owner-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video,

  body.djr-staff-portal:has(.djr-staff-portal-hero)
  > .djr-portal-ambient-video {

    height:
      calc(
        397px
        -
        var(
          --djr-ambient-video-top,
          112px
        )
      ) !important;
  }

}


/* ==========================================================
   DJR_PORTAL_AMBIENT_VIDEO_FLUSH_BRIGHT_V5_END
   ========================================================== */

/* ==========================================================
   DJR_OWNER_OVERLAY_SHELL_V1_START

   Quick Actions is the canonical visual reference.

   Applies the same full-screen glass workspace language to:
   - Quick Actions
   - Notifications
   - Bulletins

   Behaviour hooks remain untouched.
   Backdrops remain functional but are NEVER rendered as
   visible close controls.
   ========================================================== */


/* ----------------------------------------------------------
   1. QUICK ACTIONS — BACKDROP IS BEHAVIOUR ONLY

   Both the backdrop and header X intentionally carry the
   data-djr-universal-quick-close hook.

   Therefore visual close styling MUST target the close class,
   never the shared behaviour attribute.
   ---------------------------------------------------------- */

.djr-universal-quick-sheet__backdrop[data-djr-universal-quick-close] {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    rgba(5,10,28,.24) !important;

  backdrop-filter:
    blur(14px) !important;

  -webkit-backdrop-filter:
    blur(14px) !important;

  box-shadow: none !important;

  color: transparent !important;

  font-size: 0 !important;

  opacity: 1 !important;
}


/* Kill any generic generated X attached to the backdrop. */

.djr-universal-quick-sheet__backdrop[data-djr-universal-quick-close]::before,
.djr-universal-quick-sheet__backdrop[data-djr-universal-quick-close]::after {
  content: none !important;
  display: none !important;
}


/* The actual Quick Actions X is the ONLY visible close. */

.djr-universal-quick-sheet__close[data-djr-universal-quick-close] {
  position: relative !important;

  display: grid !important;
  place-items: center !important;

  flex: 0 0 52px !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  margin: 0 !important;
  padding: 0 !important;

  border:
    1px solid
    rgba(124,137,165,.18) !important;

  border-radius:
    17px !important;

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

  color:
    #7044dd !important;

  box-shadow:
    0 10px 28px
    rgba(50,42,100,.08) !important;

  font-size:
    1.75rem !important;

  line-height:
    1 !important;

  cursor:
    pointer !important;
}

.djr-universal-quick-sheet__close[data-djr-universal-quick-close]::before,
.djr-universal-quick-sheet__close[data-djr-universal-quick-close]::after {
  content: none !important;
  display: none !important;
}


/* ----------------------------------------------------------
   2. SHARED FULL-SCREEN OVERLAY CANVAS
   ---------------------------------------------------------- */

.djr-universal-quick-sheet,
.djr-bulletin-drawer {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(120,72,238,.13),
      transparent 31%
    ),
    radial-gradient(
      circle at 82% 32%,
      rgba(40,173,242,.12),
      transparent 32%
    ),
    radial-gradient(
      circle at 58% 82%,
      rgba(225,82,235,.10),
      transparent 34%
    ),
    rgba(245,248,255,.88) !important;
}


/* ----------------------------------------------------------
   3. QUICK ACTIONS CANONICAL PANEL
   ---------------------------------------------------------- */

.djr-universal-quick-sheet__panel {
  border:
    1px solid
    rgba(255,255,255,.82) !important;

  background:
    rgba(249,250,255,.82) !important;

  backdrop-filter:
    blur(24px)
    saturate(125%) !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(125%) !important;

  box-shadow:
    0 30px 90px
    rgba(21,28,64,.16) !important;
}


/* ----------------------------------------------------------
   4. BULLETINS — SAME SHELL LANGUAGE
   ---------------------------------------------------------- */

.djr-bulletin-drawer {
  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    2147483000 !important;

  display:
    grid !important;

  place-items:
    center !important;

  padding:
    max(18px,env(safe-area-inset-top))
    18px
    max(18px,env(safe-area-inset-bottom)) !important;
}

.djr-bulletin-drawer[hidden] {
  display:
    none !important;
}

.djr-bulletin-drawer__backdrop {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  border:
    0 !important;

  background:
    rgba(5,10,28,.24) !important;

  backdrop-filter:
    blur(14px) !important;

  -webkit-backdrop-filter:
    blur(14px) !important;
}

.djr-bulletin-drawer__sheet {
  position:
    relative !important;

  z-index:
    1 !important;

  width:
    min(620px,100%) !important;

  max-height:
    min(820px,calc(100dvh - 36px)) !important;

  overflow:
    hidden auto !important;

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

  border-radius:
    30px !important;

  background:
    rgba(249,250,255,.88) !important;

  backdrop-filter:
    blur(24px)
    saturate(125%) !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(125%) !important;

  box-shadow:
    0 30px 90px
    rgba(21,28,64,.18) !important;
}


/* ----------------------------------------------------------
   5. BULLETIN HEADER = QUICK ACTION HEADER LANGUAGE
   ---------------------------------------------------------- */

.djr-bulletin-drawer__header {
  position:
    sticky !important;

  top:
    0 !important;

  z-index:
    5 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    16px !important;

  min-height:
    92px !important;

  padding:
    18px 20px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    rgba(126,141,171,.13) !important;

  background:
    rgba(249,250,255,.88) !important;

  backdrop-filter:
    blur(20px) !important;

  -webkit-backdrop-filter:
    blur(20px) !important;
}

.djr-bulletin-drawer__heading {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    14px !important;
}

.djr-bulletin-drawer__heading p {
  margin:
    0 0 3px !important;

  color:
    #7752d6 !important;

  font-size:
    .66rem !important;

  font-weight:
    900 !important;

  letter-spacing:
    .15em !important;
}

.djr-bulletin-drawer__heading h2 {
  margin:
    0 !important;

  color:
    #212d46 !important;

  font-size:
    1.35rem !important;

  line-height:
    1.05 !important;
}

.djr-bulletin-close {
  display:
    grid !important;

  place-items:
    center !important;

  flex:
    0 0 52px !important;

  width:
    52px !important;

  height:
    52px !important;

  padding:
    0 !important;

  border:
    1px solid
    rgba(124,137,165,.18) !important;

  border-radius:
    17px !important;

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

  color:
    #647187 !important;
}

.djr-bulletin-close svg {
  width:
    22px !important;

  height:
    22px !important;

  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    2 !important;
}


/* ----------------------------------------------------------
   6. NOTIFICATIONS — SAME GLASS PANEL
   ---------------------------------------------------------- */

:where(html:not([data-owner-theme])) .djr-notification-feed {
  border:
    1px solid
    rgba(255,255,255,.82) !important;

  border-radius:
    30px !important;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(126,74,239,.11),
      transparent 30%
    ),
    radial-gradient(
      circle at 86% 26%,
      rgba(44,177,239,.11),
      transparent 33%
    ),
    radial-gradient(
      circle at 64% 88%,
      rgba(229,92,231,.09),
      transparent 32%
    ),
    rgba(249,250,255,.90) !important;

  backdrop-filter:
    blur(24px)
    saturate(125%) !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(125%) !important;

  box-shadow:
    0 30px 90px
    rgba(21,28,64,.18) !important;
}

:where(html:not([data-owner-theme])) .djr-notification-feed > header {
  min-height:
    92px !important;

  padding:
    18px 20px !important;

  border-bottom:
    1px solid
    rgba(126,141,171,.13) !important;

  background:
    transparent !important;
}

:where(html:not([data-owner-theme])) .djr-notification-feed__heading {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    14px !important;
}

:where(html:not([data-owner-theme])) .djr-notification-feed__heading small {
  color:
    #7752d6 !important;

  font-size:
    .66rem !important;

  font-weight:
    900 !important;

  letter-spacing:
    .15em !important;
}

:where(html:not([data-owner-theme])) .djr-notification-feed__heading strong {
  color:
    #212d46 !important;

  font-size:
    1.35rem !important;

  line-height:
    1.05 !important;
}

:where(html:not([data-owner-theme])) .djr-notification-feed
.djr-staff-drawer-close {
  display:
    grid !important;

  place-items:
    center !important;

  width:
    52px !important;

  height:
    52px !important;

  min-width:
    52px !important;

  padding:
    0 !important;

  border:
    1px solid
    rgba(124,137,165,.18) !important;

  border-radius:
    17px !important;

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

  color:
    #647187 !important;

  font-size:
    1.65rem !important;

  line-height:
    1 !important;
}


/* ----------------------------------------------------------
   7. MOBILE — ALL THREE BECOME THE SAME WORKSPACE STYLE
   ---------------------------------------------------------- */

@media (max-width:600px) {

  .djr-universal-quick-sheet {
    align-items:
      stretch !important;

    padding:
      max(8px,env(safe-area-inset-top))
      8px
      max(8px,env(safe-area-inset-bottom)) !important;
  }

  .djr-universal-quick-sheet__panel {
    width:
      100% !important;

    max-width:
      none !important;

    max-height:
      calc(
        100dvh
        - max(16px,env(safe-area-inset-top))
        - max(16px,env(safe-area-inset-bottom))
      ) !important;

    margin:
      0 !important;

    overflow:
      hidden auto !important;

    border-radius:
      28px !important;
  }


  .djr-bulletin-drawer {
    padding:
      max(8px,env(safe-area-inset-top))
      8px
      max(8px,env(safe-area-inset-bottom)) !important;
  }

  .djr-bulletin-drawer__sheet {
    width:
      100% !important;

    max-width:
      none !important;

    max-height:
      calc(
        100dvh
        - max(16px,env(safe-area-inset-top))
        - max(16px,env(safe-area-inset-bottom))
      ) !important;

    border-radius:
      28px !important;
  }


  :where(html:not([data-owner-theme])) .djr-notification-feed {
    position:
      fixed !important;

    inset:
      max(8px,env(safe-area-inset-top))
      8px
      max(8px,env(safe-area-inset-bottom))
      8px !important;

    width:
      auto !important;

    max-width:
      none !important;

    height:
      auto !important;

    max-height:
      none !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    overflow:
      hidden !important;

    border-radius:
      28px !important;
  }

  :where(html:not([data-owner-theme])) .djr-notification-feed[hidden] {
    display:
      none !important;
  }

  :where(html:not([data-owner-theme])) .djr-notification-feed__list {
    flex:
      1 1 auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    overflow-y:
      auto !important;

    -webkit-overflow-scrolling:
      touch !important;
  }

  :where(html:not([data-owner-theme])) .djr-notification-feed > footer {
    flex:
      0 0 auto !important;
  }

}


/* ==========================================================
   DJR_OWNER_OVERLAY_SHELL_V1_END
   ========================================================== */


/* ==========================================================
   DJR_QUICK_ACTION_BACKDROP_CLOSE_FIX_V1_START

   Quick Actions has TWO elements carrying the close action:

   1. the full-screen backdrop button
   2. the visible header X button

   The global close-button styling was accidentally turning
   the backdrop itself into a second visible X.

   Keep backdrop clickable but NEVER render it as visible
   close-button chrome.
   ========================================================== */

.djr-universal-quick-sheet
.djr-universal-quick-sheet__backdrop[data-djr-universal-quick-close] {
  position: absolute !important;
  inset: 0 !important;

  z-index: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  color: transparent !important;

  font-size: 0 !important;
  line-height: 0 !important;

  box-shadow: none !important;

  background:
    rgba(5,10,28,.50) !important;

  backdrop-filter:
    blur(7px) !important;

  -webkit-backdrop-filter:
    blur(7px) !important;

  cursor: default !important;

  transform: none !important;
}


/*
 * Kill any generic close-icon pseudo element inherited from
 * the universal drawer/overlay styling.
 */

.djr-universal-quick-sheet
.djr-universal-quick-sheet__backdrop[data-djr-universal-quick-close]::before,

.djr-universal-quick-sheet
.djr-universal-quick-sheet__backdrop[data-djr-universal-quick-close]::after {
  content: none !important;

  display: none !important;
}


/*
 * Real Quick Actions panel must remain above the backdrop.
 */

.djr-universal-quick-sheet
.djr-universal-quick-sheet__panel {
  position: relative !important;
  z-index: 1 !important;
}


/*
 * THIS is the sole visible Quick Actions close button.
 */

.djr-universal-quick-sheet
.djr-universal-quick-sheet__close[data-djr-universal-quick-close] {
  position: relative !important;

  display: grid !important;

  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;

  place-items: center !important;

  padding: 0 !important;

  border: 1px solid rgba(135,148,171,.22) !important;
  border-radius: 14px !important;

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

  color: #7045df !important;

  font-size: 1.45rem !important;
  line-height: 1 !important;

  box-shadow:
    0 7px 20px rgba(31,42,70,.08) !important;

  cursor: pointer !important;
}


/* ==========================================================
   DJR_QUICK_ACTION_BACKDROP_CLOSE_FIX_V1_END
   ========================================================== */

/* ==========================================================
   DJR_QUICK_ACTION_SINGLE_CLOSE_ICON_V2_START

   The Quick Actions header button already contains its own ×.
   Historical generic close styling also generates an ::after
   glyph for [data-djr-universal-quick-close], producing the
   second purple X visible underneath the button.

   This close control must render exactly ONE glyph.
   ========================================================== */

.djr-universal-quick-sheet
.djr-universal-quick-sheet__close[data-djr-universal-quick-close]::before,

.djr-universal-quick-sheet
.djr-universal-quick-sheet__close[data-djr-universal-quick-close]::after {
  content: none !important;
  display: none !important;
  position: static !important;
  width: 0 !important;
  height: 0 !important;
}


/*
 * Keep the literal × contained and centred inside the
 * dedicated header button.
 */

.djr-universal-quick-sheet
.djr-universal-quick-sheet__close[data-djr-universal-quick-close] {
  overflow: hidden !important;
  text-indent: 0 !important;
  line-height: 1 !important;
}


/* ==========================================================
   DJR_QUICK_ACTION_SINGLE_CLOSE_ICON_V2_END
   ========================================================== */


/* ==========================================================
   DJR_QUICK_ACTION_TREE_V1_START

   Messaging-tree-inspired Quick Actions.

   No modal.
   No backdrop.
   No sheet.
   No wrappers around slot icons.
   ========================================================== */


.djr-quick-tree[hidden] {
  display: none !important;
}


.djr-quick-tree {
  position: absolute !important;

  z-index: 2147482500 !important;

  right: 0 !important;

  bottom:
    calc(
      100%
      + 12px
    ) !important;

  display: flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-end !important;

  gap: 9px !important;

  pointer-events:
    auto !important;
}


/*
 * The vertical rail itself intentionally has NO outer card.
 */

.djr-quick-tree__slots {
  display: flex !important;

  flex-direction:
    column-reverse !important;

  align-items:
    flex-end !important;

  gap: 9px !important;
}


.djr-quick-tree__slot {
  position: relative !important;

  display: flex !important;

  align-items:
    center !important;

  justify-content:
    flex-end !important;

  min-height: 52px !important;
}


/*
 * Occupied and empty slots use exactly the same physical circle.
 */

.djr-quick-tree__module,
.djr-quick-tree__empty {
  appearance: none !important;

  position: relative !important;

  z-index: 2 !important;

  display: grid !important;

  place-items: center !important;

  flex: 0 0 52px !important;

  width: 52px !important;
  height: 52px !important;

  min-width: 52px !important;

  margin: 0 !important;
  padding: 0 !important;

  border:
    1px solid
    rgba(
      209,
      199,
      248,
      .95
    ) !important;

  border-radius:
    50% !important;

  color:
    #7149e5 !important;

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

  box-shadow:
    0
    9px
    24px
    rgba(
      24,
      32,
      64,
      .16
    ),
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .9
    ) !important;

  font: inherit !important;

  cursor: pointer !important;

  -webkit-tap-highlight-color:
    transparent !important;
}


.djr-quick-tree__module {
  overflow: hidden !important;

  color: #fff !important;

  border-color:
    rgba(
      255,
      255,
      255,
      .36
    ) !important;

  background:
    linear-gradient(
      145deg,
      #7650eb,
      #5434ca
    ) !important;
}


.djr-quick-tree__module > span {
  display: grid !important;

  width: 100% !important;
  height: 100% !important;

  place-items: center !important;

  overflow: hidden !important;

  border-radius:
    inherit !important;
}


.djr-quick-tree__module img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius:
    inherit !important;
}


.djr-quick-tree__module svg {
  width: 25px !important;
  height: 25px !important;
}


.djr-quick-tree__empty {
  font-size: 1.65rem !important;

  font-weight: 500 !important;

  line-height: 1 !important;
}


.djr-quick-tree__module:active,
.djr-quick-tree__empty:active {
  transform:
    scale(.93) !important;
}


/*
 * Hide placeholder + whenever that physical slot has a module.
 */

.djr-quick-tree__slot:
  has(
    [data-djr-quick-tree-module]
  )
  .djr-quick-tree__empty {
  display: none !important;
}


/*
 * Tiny icon-only tool row.
 */

.djr-quick-tree__tools[hidden] {
  display: none !important;
}


.djr-quick-tree__tools {
  position: absolute !important;

  z-index: 1 !important;

  right: 61px !important;

  top: 50% !important;

  display: flex !important;

  align-items:
    center !important;

  gap: 4px !important;

  transform:
    translateY(-50%) !important;

  white-space:
    nowrap !important;
}


.djr-quick-tree__tools button {
  appearance: none !important;

  display: grid !important;

  width: 31px !important;
  height: 31px !important;

  min-width: 31px !important;

  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border:
    1px solid
    #ddd7ef !important;

  border-radius:
    50% !important;

  color:
    #6843d6 !important;

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

  box-shadow:
    0
    5px
    13px
    rgba(
      30,
      38,
      67,
      .12
    ) !important;

  font: inherit !important;

  font-size:
    .72rem !important;

  font-weight:
    900 !important;

  cursor: pointer !important;
}


.djr-quick-tree__tools
[data-djr-quick-tree-remove] {
  color:
    #b13b58 !important;
}


/*
 * Compact local module picker.
 *
 * This is deliberately NOT a screen overlay.
 */

.djr-quick-tree__picker[hidden] {
  display: none !important;
}


.djr-quick-tree__picker {
  position: absolute !important;

  z-index: 10 !important;

  right: 61px !important;

  bottom: 0 !important;

  width:
    min(
      285px,
      calc(
        100vw
        - 92px
      )
    ) !important;

  max-height:
    min(
      360px,
      55dvh
    ) !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(
      220,
      220,
      237,
      .96
    ) !important;

  border-radius:
    19px !important;

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

  box-shadow:
    0
    18px
    50px
    rgba(
      18,
      25,
      55,
      .24
    ) !important;

  backdrop-filter:
    blur(16px) !important;

  -webkit-backdrop-filter:
    blur(16px) !important;
}


.djr-quick-tree__picker > header {
  display: flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap: 10px !important;

  padding:
    12px
    12px
    10px
    14px !important;

  border-bottom:
    1px solid
    #ececf3 !important;

  background:
    linear-gradient(
      135deg,
      #faf9ff,
      #f6f8ff
    ) !important;
}


.djr-quick-tree__picker > header span {
  display: grid !important;

  gap: 1px !important;
}


.djr-quick-tree__picker > header small {
  color:
    #7750db !important;

  font-size:
    .54rem !important;

  font-weight:
    900 !important;

  letter-spacing:
    .13em !important;
}


.djr-quick-tree__picker > header strong {
  color:
    #26324a !important;

  font-size:
    .82rem !important;
}


.djr-quick-tree__picker > header button {
  appearance: none !important;

  display: grid !important;

  width: 30px !important;
  height: 30px !important;

  place-items: center !important;

  border:
    1px solid
    #e1e2ea !important;

  border-radius:
    10px !important;

  color:
    #6e778a !important;

  background:
    #fff !important;

  font:
    inherit !important;

  font-size:
    1rem !important;

  cursor: pointer !important;
}


.djr-quick-tree__picker-list {
  display: grid !important;

  gap: 3px !important;

  max-height:
    290px !important;

  overflow-y:
    auto !important;

  padding:
    7px !important;

  overscroll-behavior:
    contain !important;

  -webkit-overflow-scrolling:
    touch !important;
}


.djr-quick-tree__picker-item {
  appearance: none !important;

  display: grid !important;

  grid-template-columns:
    37px
    minmax(
      0,
      1fr
    ) !important;

  align-items:
    center !important;

  gap: 10px !important;

  width: 100% !important;

  min-height:
    48px !important;

  padding:
    5px
    8px !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  color:
    #26324a !important;

  background:
    transparent !important;

  font:
    inherit !important;

  text-align:
    left !important;

  cursor: pointer !important;
}


.djr-quick-tree__picker-item:active {
  background:
    #f2efff !important;
}


.djr-quick-tree__picker-icon {
  display: grid !important;

  width: 37px !important;
  height: 37px !important;

  place-items: center !important;

  overflow: hidden !important;

  border-radius:
    50% !important;

  color:
    #fff !important;

  background:
    linear-gradient(
      145deg,
      #7650eb,
      #5434ca
    ) !important;
}


.djr-quick-tree__picker-icon img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
}


.djr-quick-tree__picker-item strong {
  min-width: 0 !important;

  overflow: hidden !important;

  font-size:
    .72rem !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;
}


.djr-quick-tree__picker-empty {
  margin: 0 !important;

  padding:
    20px
    14px !important;

  color:
    #8791a3 !important;

  font-size:
    .7rem !important;

  text-align:
    center !important;
}


/*
 * Ensure the nav/component creates the anchor context.
 */

.djr-universal-nav-v3 {
  position: relative !important;
}


/*
 * Bolt visually becomes the base of the vertical tree.
 */

.djr-universal-nav-v3__quick {
  transition:
    transform
    .18s
    ease,
    box-shadow
    .18s
    ease !important;
}


.djr-universal-nav-v3.djr-quick-tree-open
.djr-universal-nav-v3__quick {
  transform:
    scale(.94) !important;

  box-shadow:
    0
    0
    0
    4px
    rgba(
      116,
      76,
      226,
      .13
    ) !important;
}


@media (max-width: 520px) {

  .djr-quick-tree {
    right: 1px !important;

    bottom:
      calc(
        100%
        + 10px
      ) !important;

    gap: 8px !important;
  }


  .djr-quick-tree__slots {
    gap: 8px !important;
  }


  .djr-quick-tree__module,
  .djr-quick-tree__empty {
    flex-basis:
      48px !important;

    width: 48px !important;
    height: 48px !important;

    min-width:
      48px !important;
  }


  .djr-quick-tree__tools {
    right: 56px !important;
  }


  .djr-quick-tree__tools button {
    width: 29px !important;
    height: 29px !important;

    min-width:
      29px !important;
  }


  .djr-quick-tree__picker {
    right: 55px !important;

    width:
      min(
        270px,
        calc(
          100vw
          - 74px
        )
      ) !important;
  }

}


/* ==========================================================
   DJR_QUICK_ACTION_TREE_V1_END
   ========================================================== */


/* ==========================================================
   DJR_QUICK_ACTION_TREE_REFERENCE_V2

   Reference contract:
   - Bolt is root at bottom-left of universal navigation
   - Three actions grow vertically upward from bolt
   - Light blurred page backdrop
   - Long-press service tools grow RIGHT from selected icon
   - Single tap launches occupied module

   This block is the FINAL Quick Action geometry authority.
   It does not alter hero/card geometry.
   ========================================================== */


/* ----------------------------------------------------------
   LIGHT FOCUS BACKDROP
   ---------------------------------------------------------- */

body.djr-quick-tree-focus::before {
  content: "";

  position: fixed;
  z-index: 2147481800;

  inset: 0;

  background:
    rgba(12, 18, 40, .12);

  -webkit-backdrop-filter:
    blur(3.5px)
    saturate(.96);

  backdrop-filter:
    blur(3.5px)
    saturate(.96);

  pointer-events: auto;

  animation:
    djrQuickTreeBackdropIn
    .16s ease-out both;
}


@keyframes djrQuickTreeBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/*
 * Keep the live hero/nav/tree ABOVE the soft backdrop.
 */

body.djr-quick-tree-focus
.djr-staff-portal-hero {
  z-index:
    2147481900 !important;
}


body.djr-quick-tree-focus
.djr-universal-nav-v3 {
  z-index:
    2147482100 !important;
}


/* ----------------------------------------------------------
   TREE ROOT

   Anchor directly above the LEFT edge of the universal nav,
   visually continuing upward from the lightning bolt.
   ---------------------------------------------------------- */

.djr-universal-nav-v3
> .djr-quick-tree {
  position:
    absolute !important;

  z-index:
    2147482500 !important;

  left:
    10px !important;

  right:
    auto !important;

  bottom:
    calc(
      100%
      + 12px
    ) !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  gap:
    9px !important;

  pointer-events:
    auto !important;
}


/*
 * Slot 1 must sit closest to the lightning button,
 * then 2, then 3 upward.
 */

.djr-quick-tree__slots {
  flex-direction:
    column-reverse !important;

  align-items:
    flex-start !important;
}


/* ----------------------------------------------------------
   INDIVIDUAL ACTION CIRCLES
   ---------------------------------------------------------- */

.djr-quick-tree__module,
.djr-quick-tree__empty {
  box-shadow:
    0 12px 25px
      rgba(28, 16, 81, .26),
    0 3px 8px
      rgba(28, 16, 81, .18),
    inset 0 1px 0
      rgba(255,255,255,.45) !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease !important;

  touch-action:
    manipulation !important;

  user-select:
    none !important;

  -webkit-user-select:
    none !important;

  -webkit-touch-callout:
    none !important;
}


.djr-quick-tree__module:active,
.djr-quick-tree__empty:active {
  transform:
    scale(.94) !important;

  box-shadow:
    0 7px 16px
      rgba(28, 16, 81, .24),
    inset 0 1px 0
      rgba(255,255,255,.38) !important;
}


/* ----------------------------------------------------------
   LONG-PRESS SERVICE RAIL

   Photo-1 structure:
   selected icon | rocket | + | trash
   ---------------------------------------------------------- */

.djr-quick-tree__tools {
  position:
    absolute !important;

  z-index:
    1 !important;

  left:
    61px !important;

  right:
    auto !important;

  top:
    50% !important;

  transform:
    translateY(-50%) !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    9px !important;

  padding:
    5px
    8px !important;

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

  border-radius:
    999px !important;

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

  -webkit-backdrop-filter:
    blur(12px)
    saturate(1.12) !important;

  backdrop-filter:
    blur(12px)
    saturate(1.12) !important;

  box-shadow:
    0 12px 26px
      rgba(28, 16, 81, .18) !important;

  transform-origin:
    left center !important;
}


.djr-quick-tree__tools[hidden] {
  display:
    none !important;
}


.djr-quick-tree__tools button {
  box-shadow:
    0 6px 13px
      rgba(56, 31, 129, .16),
    inset 0 1px 0
      rgba(255,255,255,.62) !important;
}


/* ----------------------------------------------------------
   PICKER

   Open to the RIGHT of the vertical tree so it never covers
   the lightning root or installed actions.
   ---------------------------------------------------------- */

.djr-quick-tree__picker {
  left:
    61px !important;

  right:
    auto !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 520px) {

  .djr-universal-nav-v3
  > .djr-quick-tree {
    left:
      8px !important;

    right:
      auto !important;

    bottom:
      calc(
        100%
        + 10px
      ) !important;
  }


  .djr-quick-tree__tools {
    left:
      56px !important;

    right:
      auto !important;

    gap:
      7px !important;
  }


  .djr-quick-tree__picker {
    left:
      55px !important;

    right:
      auto !important;

    width:
      min(
        270px,
        calc(
          100vw
          - 74px
        )
      ) !important;
  }

}


/* ==========================================================
   DJR_QUICK_ACTION_TREE_REFERENCE_V2_END
   ========================================================== */




/* ==========================================================
   DJR_QUICK_ACTION_TREE_SURGICAL_V3

   FINAL corrections over REFERENCE_V2:

   1. Tree is a body-level floating surface and remains sharp.
   2. Background alone receives restrained modal blur.
   3. Occupied slots can never display their + placeholder.
   4. Long press produces exactly:
        [module] [rocket] [+] [trash]
   5. Single tap behaviour remains owned by V2 JS.
   ========================================================== */


/* ----------------------------------------------------------
   RETIRE V2 BODY PSEUDO BACKDROP
   ---------------------------------------------------------- */

body.djr-quick-tree-focus::before {
  content:
    none !important;

  display:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  backdrop-filter:
    none !important;
}


/* ----------------------------------------------------------
   ACTUAL BACKDROP

   Direct child of body.
   Everything behind this receives a restrained soft blur.
   Tree itself sits ABOVE this layer.
   ---------------------------------------------------------- */

.djr-quick-tree-backdrop {
  position:
    fixed !important;

  z-index:
    2147482600 !important;

  inset:
    0 !important;

  display:
    block !important;

  background:
    rgba(
      10,
      15,
      34,
      .10
    ) !important;

  -webkit-backdrop-filter:
    blur(2.6px)
    saturate(.97) !important;

  backdrop-filter:
    blur(2.6px)
    saturate(.97) !important;

  pointer-events:
    auto !important;

  animation:
    djrQuickTreeV3BackdropIn
    .15s
    ease-out
    both !important;
}


.djr-quick-tree-backdrop[hidden] {
  display:
    none !important;
}


@keyframes djrQuickTreeV3BackdropIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* ----------------------------------------------------------
   FLOATING TREE

   Direct child of body = cannot inherit/enter the blurred
   hero/nav stacking context.
   ---------------------------------------------------------- */

body
> .djr-quick-tree.djr-quick-tree--floating {
  position:
    fixed !important;

  z-index:
    2147483200 !important;

  left:
    var(
      --djr-quick-tree-left,
      10px
    ) !important;

  right:
    auto !important;

  top:
    auto !important;

  bottom:
    var(
      --djr-quick-tree-bottom,
      90px
    ) !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  gap:
    9px !important;

  overflow:
    visible !important;

  filter:
    none !important;

  -webkit-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  backdrop-filter:
    none !important;

  pointer-events:
    auto !important;

  isolation:
    isolate !important;
}


body
> .djr-quick-tree.djr-quick-tree--floating[hidden] {
  display:
    none !important;
}


/* ----------------------------------------------------------
   SLOT ORDER
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__slots {
  display:
    flex !important;

  flex-direction:
    column-reverse !important;

  align-items:
    flex-start !important;

  gap:
    10px !important;
}


/* ----------------------------------------------------------
   OCCUPIED SLOT PLACEHOLDER

   This is deliberately redundant with JS.
   There must NEVER be an occupied icon followed by a
   permanent white + circle.
   ---------------------------------------------------------- */

.djr-quick-tree__slot:
has(
  [data-djr-quick-tree-module]
)
> [data-djr-quick-tree-empty] {
  display:
    none !important;
}


[data-djr-quick-tree-empty][hidden] {
  display:
    none !important;
}


/* ----------------------------------------------------------
   MODULE CIRCLES
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module,
body
> .djr-quick-tree
.djr-quick-tree__empty {
  position:
    relative !important;

  z-index:
    4 !important;

  box-shadow:
    0
    13px
    28px
    rgba(
      37,
      22,
      92,
      .26
    ),

    0
    4px
    10px
    rgba(
      31,
      18,
      76,
      .18
    ),

    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .48
    ) !important;
}


/* ----------------------------------------------------------
   MANAGEMENT RAIL

   Long press only.

   [selected module]   [rocket] [+] [trash]
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__tools {
  position:
    absolute !important;

  z-index:
    3 !important;

  left:
    61px !important;

  right:
    auto !important;

  top:
    50% !important;

  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  gap:
    7px !important;

  width:
    auto !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    3px
    4px !important;

  transform:
    translateY(-50%) !important;

  border:
    0 !important;

  border-radius:
    999px !important;

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

  -webkit-backdrop-filter:
    blur(8px)
    saturate(1.08) !important;

  backdrop-filter:
    blur(8px)
    saturate(1.08) !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;

  white-space:
    nowrap !important;
}


body
> .djr-quick-tree
.djr-quick-tree__tools[hidden] {
  display:
    none !important;
}


/* Actual service buttons */

body
> .djr-quick-tree
.djr-quick-tree__tools
button {
  appearance:
    none !important;

  display:
    grid !important;

  place-items:
    center !important;

  flex:
    0 0 34px !important;

  width:
    34px !important;

  height:
    34px !important;

  min-width:
    34px !important;

  min-height:
    34px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    1px
    solid
    rgba(
      102,
      73,
      203,
      .18
    ) !important;

  border-radius:
    50% !important;

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

  color:
    #5f37c6 !important;

  box-shadow:
    0
    7px
    16px
    rgba(
      42,
      24,
      105,
      .20
    ),

    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .90
    ) !important;

  cursor:
    pointer !important;

  -webkit-tap-highlight-color:
    transparent !important;
}


body
> .djr-quick-tree
.djr-quick-tree__tools
button:active {
  transform:
    scale(.91) !important;
}


/* SVG service symbols */

body
> .djr-quick-tree
.djr-quick-tree__tools
button
svg {
  display:
    block !important;

  width:
    18px !important;

  height:
    18px !important;

  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    1.9 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;

  pointer-events:
    none !important;
}


/* Rocket body wants a subtle filled nose/body shape */

body
> .djr-quick-tree
[data-djr-quick-tree-launch]
svg
path:first-child {
  fill:
    currentColor !important;

  stroke:
    currentColor !important;
}


/* Remove has a restrained warning accent only */

body
> .djr-quick-tree
[data-djr-quick-tree-remove] {
  color:
    #873c70 !important;
}


/* ----------------------------------------------------------
   PICKER

   Remains to right of tree.
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__picker {
  left:
    61px !important;

  right:
    auto !important;

  z-index:
    10 !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 520px) {

  body
  > .djr-quick-tree
  .djr-quick-tree__tools {
    left:
      56px !important;

    gap:
      6px !important;
  }


  body
  > .djr-quick-tree
  .djr-quick-tree__tools
  button {
    flex-basis:
      32px !important;

    width:
      32px !important;

    height:
      32px !important;

    min-width:
      32px !important;

    min-height:
      32px !important;
  }


  body
  > .djr-quick-tree
  .djr-quick-tree__tools
  button
  svg {
    width:
      17px !important;

    height:
      17px !important;
  }


  body
  > .djr-quick-tree
  .djr-quick-tree__picker {
    left:
      55px !important;

    width:
      min(
        270px,
        calc(
          100vw
          - 74px
        )
      ) !important;
  }

}


/* ==========================================================
   DJR_QUICK_ACTION_TREE_SURGICAL_V3_END
   ========================================================== */



/* ==========================================================
   DJR_QUICK_ACTION_TREE_NATIVE_MODULE_ICONS_V1

   Quick Action shortcuts must display the SAME native module
   icon treatment used by the actual module.

   The shortcut shell supplies geometry/shadow only.
   It must never recolour the module purple.
   ========================================================== */


/* ----------------------------------------------------------
   OCCUPIED QUICK ACTION SHELL

   Remove the old forced purple treatment completely.
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module {
  overflow:
    hidden !important;

  padding:
    0 !important;

  color:
    inherit !important;

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

  background:
    transparent !important;

  background-color:
    transparent !important;

  background-image:
    none !important;

  filter:
    none !important;

  -webkit-filter:
    none !important;
}


/* ----------------------------------------------------------
   ICON HOST

   Let the included native module icon occupy the full circle.
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module
> span {
  position:
    relative !important;

  display:
    grid !important;

  width:
    100% !important;

  height:
    100% !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  place-items:
    center !important;

  overflow:
    hidden !important;

  border-radius:
    inherit !important;

  color:
    inherit !important;

  background:
    transparent !important;

  filter:
    none !important;

  -webkit-filter:
    none !important;
}


/* ----------------------------------------------------------
   IMAGE ASSETS

   Preserve the real module artwork exactly.
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module
img {
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  object-fit:
    cover !important;

  border-radius:
    inherit !important;

  background:
    transparent !important;

  opacity:
    1 !important;

  filter:
    none !important;

  -webkit-filter:
    none !important;

  mix-blend-mode:
    normal !important;
}


/* ----------------------------------------------------------
   SVG MODULE ICONS

   Critical:
   do NOT force currentColor, purple, white, stroke or fill.

   The SVG/module template remains its own visual authority.
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module
svg {
  width:
    100% !important;

  height:
    100% !important;

  max-width:
    100% !important;

  max-height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    inherit;

  filter:
    none !important;

  -webkit-filter:
    none !important;
}


/*
 * Undo old Quick Action-specific SVG recolouring without
 * interfering with fill/stroke rules authored by the module
 * icon itself.
 */

body
> .djr-quick-tree
.djr-quick-tree__module
svg,
body
> .djr-quick-tree
.djr-quick-tree__module
svg * {
  opacity:
    1 !important;

  filter:
    none !important;

  -webkit-filter:
    none !important;
}


/* ----------------------------------------------------------
   COMMON MODULE-ICON WRAPPERS

   The shared _module_app_icon.html may provide its own app
   tile/background classes. Preserve those instead of painting
   over them with the Quick Action controller.
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module
[class*="module-app-icon"],
body
> .djr-quick-tree
.djr-quick-tree__module
[class*="module-icon"],
body
> .djr-quick-tree
.djr-quick-tree__module
[class*="app-icon"] {
  width:
    100% !important;

  height:
    100% !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  border-radius:
    inherit !important;

  filter:
    none !important;

  -webkit-filter:
    none !important;
}


/* ==========================================================
   DJR_QUICK_ACTION_TREE_NATIVE_MODULE_ICONS_V1_END
   ========================================================== */


/* ==========================================================
   DJR_QUICK_ACTION_TREE_WHITE_ICON_TILE_V2

   FINAL occupied Quick Action visual authority.

   V3 runtime contract:
     <body>
       <div class="djr-quick-tree">...</div>
     </body>

   Therefore this MUST target:
     body > .djr-quick-tree

   Behaviour, positioning, blur, picker and long-press rail
   remain untouched.
   ========================================================== */


/* ----------------------------------------------------------
   OCCUPIED TILE
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module {
  box-sizing: border-box !important;

  display: grid !important;
  place-items: center !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  flex:
    0 0 52px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(214, 207, 234, .96) !important;

  border-radius:
    999px !important;

  background:
    #ffffff !important;

  background-color:
    #ffffff !important;

  background-image:
    none !important;

  box-shadow:
    0 11px 24px rgba(20, 15, 65, .22),
    0 3px 8px rgba(20, 15, 65, .14),
    inset 0 1px 0 rgba(255,255,255,1) !important;

  color:
    inherit !important;
}


/* ----------------------------------------------------------
   OUTER ICON HOST
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module
> span {
  box-sizing:
    border-box !important;

  display:
    grid !important;

  place-items:
    center !important;

  width:
    100% !important;

  height:
    100% !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    8px !important;

  overflow:
    visible !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  transform:
    none !important;
}


/* ----------------------------------------------------------
   NATIVE MODULE ICON WRAPPERS

   Shared icon partials have internal wrappers of their own.
   Reset their inherited tile geometry and make them an
   optical 34px square in the middle of the 52px white tile.
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module
> span
> * {
  box-sizing:
    border-box !important;

  display:
    grid !important;

  place-items:
    center !important;

  width:
    34px !important;

  height:
    34px !important;

  max-width:
    34px !important;

  max-height:
    34px !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  margin:
    auto !important;

  padding:
    0 !important;

  position:
    static !important;

  inset:
    auto !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  transform:
    none !important;

  translate:
    none !important;
}


/* ----------------------------------------------------------
   SVG ARTWORK
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module
svg {
  display:
    block !important;

  width:
    32px !important;

  height:
    32px !important;

  max-width:
    32px !important;

  max-height:
    32px !important;

  margin:
    auto !important;

  padding:
    0 !important;

  position:
    static !important;

  inset:
    auto !important;

  overflow:
    visible !important;

  background:
    transparent !important;

  transform:
    none !important;

  translate:
    none !important;

  filter:
    none !important;

  -webkit-filter:
    none !important;
}


/* ----------------------------------------------------------
   RASTER / CUSTOM MODULE ARTWORK
   ---------------------------------------------------------- */

body
> .djr-quick-tree
.djr-quick-tree__module
img {
  display:
    block !important;

  width:
    32px !important;

  height:
    32px !important;

  max-width:
    32px !important;

  max-height:
    32px !important;

  margin:
    auto !important;

  padding:
    0 !important;

  position:
    static !important;

  inset:
    auto !important;

  object-fit:
    contain !important;

  object-position:
    50% 50% !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  transform:
    none !important;

  translate:
    none !important;

  filter:
    none !important;

  -webkit-filter:
    none !important;

  mix-blend-mode:
    normal !important;
}


/* ----------------------------------------------------------
   DO NOT CHANGE EMPTY SLOTS

   Empty slots retain their existing + appearance.
   ---------------------------------------------------------- */


/* ----------------------------------------------------------
   MOBILE — match current 48px action geometry
   ---------------------------------------------------------- */

@media (max-width: 520px) {

  body
  > .djr-quick-tree
  .djr-quick-tree__module {
    width:
      48px !important;

    height:
      48px !important;

    min-width:
      48px !important;

    min-height:
      48px !important;

    flex-basis:
      48px !important;
  }


  body
  > .djr-quick-tree
  .djr-quick-tree__module
  > span {
    padding:
      7px !important;
  }


  body
  > .djr-quick-tree
  .djr-quick-tree__module
  > span
  > * {
    width:
      32px !important;

    height:
      32px !important;

    max-width:
      32px !important;

    max-height:
      32px !important;
  }


  body
  > .djr-quick-tree
  .djr-quick-tree__module
  svg,

  body
  > .djr-quick-tree
  .djr-quick-tree__module
  img {
    width:
      30px !important;

    height:
      30px !important;

    max-width:
      30px !important;

    max-height:
      30px !important;
  }

}


/* ==========================================================
   DJR_QUICK_ACTION_TREE_WHITE_ICON_TILE_V2_END
   ========================================================== */



/* ==========================================================
   DJR_OWNER_HEADER_REFLECTION_V3

   PURPOSE:
   Reflect the Owner hero/nav rail into the white dashboard
   surface without altering document layout.

   IMPORTANT:
   - NO extra padding
   - NO extra margin
   - NO blue box
   - reflection begins immediately below hero
   - reflection fades behind existing dashboard content
   ========================================================== */


/*
 * The app-library remains exactly where it was before.
 */

.djr-owner-app-library {
  position: relative !important;
  isolation: isolate !important;

  margin-top: 0 !important;
  padding-top: 0 !important;

  background:
    #f8f9fc !important;
}


/*
 * Reflection layer.
 *
 * This is absolutely positioned, therefore it consumes
 * ZERO layout height.
 */

.djr-owner-app-library::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 0;
  left: 0;
  right: 0;

  height: 150px;

  pointer-events: none;

  background:

    /*
     * Main reflected purple rail.
     * Strongest exactly at the upper edge.
     */
    linear-gradient(
      180deg,
      rgba(116, 45, 230, .29) 0%,
      rgba(96, 54, 205, .20) 12%,
      rgba(66, 75, 176, .12) 27%,
      rgba(76, 88, 161, .055) 43%,
      rgba(248,249,252,0) 73%
    ),

    /*
     * Left blue reflection from hero.
     */
    radial-gradient(
      ellipse 65% 90% at 15% -12%,
      rgba(35, 133, 212, .20) 0%,
      rgba(35, 133, 212, .10) 32%,
      transparent 68%
    ),

    /*
     * Right violet reflection from Tasks/settings area.
     */
    radial-gradient(
      ellipse 70% 100% at 86% -8%,
      rgba(153, 51, 244, .24) 0%,
      rgba(125, 54, 219, .12) 34%,
      transparent 69%
    ),

    /*
     * Specular white glare across the reflected surface.
     */
    linear-gradient(
      108deg,
      transparent 0%,
      transparent 32%,
      rgba(255,255,255,.05) 38%,
      rgba(255,255,255,.62) 45%,
      rgba(245,248,255,.34) 49%,
      rgba(255,255,255,.08) 55%,
      transparent 63%,
      transparent 100%
    ),

    linear-gradient(
      180deg,
      rgba(255,255,255,.36) 0%,
      rgba(255,255,255,.18) 28%,
      rgba(248,249,252,.86) 70%,
      #f8f9fc 100%
    );

  /*
   * Blur makes the rail feel reflected rather than painted.
   */
  filter: blur(7px);

  /*
   * Oversize slightly so blur doesn't leave hard edges.
   */
  transform:
    translateY(-5px)
    scaleX(1.015);

  transform-origin: top center;

  opacity: .92;
}


/*
 * Fine glossy surface highlight.
 */

.djr-owner-app-library::after {
  content: "";

  position: absolute;
  z-index: 1;

  top: 0;
  left: 0;
  right: 0;

  height: 115px;

  pointer-events: none;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.52) 0%,
      rgba(255,255,255,.18) 18%,
      transparent 66%
    ),

    linear-gradient(
      102deg,
      transparent 0%,
      transparent 26%,
      rgba(255,255,255,.0) 34%,
      rgba(255,255,255,.48) 41%,
      rgba(193,204,255,.14) 47%,
      rgba(255,255,255,.05) 54%,
      transparent 61%
    );

  opacity: .72;
}


/*
 * Existing content stays exactly where it currently lives
 * and simply renders above the reflection.
 */

.djr-owner-app-library
.djr-app-library-heading,

.djr-owner-app-library
.djr-owner-module-grid,

.djr-owner-app-library
.djr-staff-module-grid,

.djr-owner-app-library
.djr-staff-module-feedback {
  position: relative;
  z-index: 3;
}


/*
 * Do NOT artificially offset the module heading.
 */

.djr-owner-app-library
.djr-app-library-heading {
  margin-top: 0 !important;
}


/* ----------------------------------------------------------
   MOBILE TUNING
   ---------------------------------------------------------- */

@media (max-width: 720px) {

  .djr-owner-app-library {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


  .djr-owner-app-library::before {
    height: 132px;

    filter: blur(6px);

    transform:
      translateY(-4px)
      scaleX(1.018);

    background:

      linear-gradient(
        180deg,
        rgba(119, 42, 232, .31) 0%,
        rgba(101, 48, 211, .21) 13%,
        rgba(61, 82, 182, .12) 29%,
        rgba(69, 88, 162, .052) 46%,
        rgba(248,249,252,0) 76%
      ),

      radial-gradient(
        ellipse 72% 95% at 12% -12%,
        rgba(28, 126, 211, .21) 0%,
        rgba(28, 126, 211, .09) 32%,
        transparent 68%
      ),

      radial-gradient(
        ellipse 78% 100% at 89% -10%,
        rgba(159, 47, 247, .24) 0%,
        rgba(124, 52, 220, .11) 35%,
        transparent 70%
      ),

      linear-gradient(
        107deg,
        transparent 0%,
        transparent 29%,
        rgba(255,255,255,.02) 36%,
        rgba(255,255,255,.60) 44%,
        rgba(241,245,255,.30) 49%,
        rgba(255,255,255,.06) 56%,
        transparent 63%
      ),

      linear-gradient(
        180deg,
        rgba(255,255,255,.33) 0%,
        rgba(255,255,255,.15) 26%,
        rgba(248,249,252,.88) 72%,
        #f8f9fc 100%
      );
  }


  .djr-owner-app-library::after {
    height: 100px;
  }

}


/* ==========================================================
   DJR_OWNER_HEADER_REFLECTION_V3_END
   ========================================================== */


/* ==========================================================
   DJR_OWNER_SEAMLESS_HEADER_REFLECTION_V4

   Intent:
   - NO separate coloured block
   - NO additional layout height
   - NO gap below profile/header
   - existing white dashboard surface begins immediately
   - subtle glossy reflection of the purple/blue header
     is painted INSIDE that existing white surface
   ========================================================== */


/* ----------------------------------------------------------
   1. REMOVE THE MODULE-AREA TOP GAP
   ---------------------------------------------------------- */

.djr-owner-app-library.djr-staff-module-area {
  position: relative !important;

  margin-top: 0 !important;
}


/* ----------------------------------------------------------
   2. KEEP THE EXISTING WHITE DASHBOARD SURFACE
   ---------------------------------------------------------- */

.djr-owner-app-library {
  isolation: isolate;

  background:
    #f8f9fc !important;
}


/* ----------------------------------------------------------
   3. REFLECTION — DECORATION ONLY
      Absolute positioning means it contributes ZERO height.
   ---------------------------------------------------------- */

.djr-owner-app-library::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: 0;
  left: 0;
  right: 0;

  height: 110px;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 76% -20%,
      rgba(126, 60, 255, .18) 0%,
      rgba(126, 60, 255, .08) 30%,
      transparent 66%
    ),
    radial-gradient(
      ellipse at 18% -28%,
      rgba(49, 126, 255, .13) 0%,
      rgba(49, 126, 255, .05) 35%,
      transparent 68%
    ),
    linear-gradient(
      to bottom,
      rgba(70, 47, 170, .13) 0%,
      rgba(112, 72, 230, .07) 20%,
      rgba(255, 255, 255, .40) 47%,
      rgba(248, 249, 252, 0) 100%
    );

  filter:
    blur(.15px);

  opacity: .94;
}


/* ----------------------------------------------------------
   4. SPECULAR WHITE SHEEN
   Gives a glossy reflective-surface effect rather than
   looking like another coloured panel.
   ---------------------------------------------------------- */

.djr-owner-app-library::after {
  content: "";

  position: absolute;
  z-index: -1;

  top: 0;
  left: 0;
  right: 0;

  height: 76px;

  pointer-events: none;

  background:
    linear-gradient(
      106deg,
      transparent 0%,
      rgba(255,255,255,.22) 23%,
      rgba(255,255,255,.78) 46%,
      rgba(255,255,255,.16) 64%,
      transparent 84%
    );

  filter:
    blur(12px);

  opacity: .60;

  transform:
    translateY(-22px);
}


/* ----------------------------------------------------------
   5. MODULE HEADING STAYS IN NORMAL DOCUMENT FLOW
      We are NOT pushing it downward for the reflection.
   ---------------------------------------------------------- */

.djr-owner-app-library
.djr-app-library-heading {
  position: relative;
  z-index: 1;

  margin-top: 0 !important;
}


/* ----------------------------------------------------------
   6. MOBILE — reflection must start on exact first pixel
      beneath header/nav.
   ---------------------------------------------------------- */

@media (max-width: 760px) {

  .djr-owner-app-library.djr-staff-module-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .djr-owner-app-library::before {
    height: 96px;
  }

  .djr-owner-app-library::after {
    height: 68px;
  }

}


/* ==========================================================
   DJR_OWNER_SEAMLESS_HEADER_REFLECTION_V4_END
   ========================================================== */


/* ==========================================================
   DJR NOTIFICATION FEED V2
   TASKS · MESSENGER · ZOHO · MODULES
   ========================================================== */

:where(html:not([data-owner-theme])) .djr-notification-feed__filters {
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:11px 12px 10px;
  scrollbar-width:none;
  border-bottom:1px solid rgba(100,84,155,.12);
}

:where(html:not([data-owner-theme])) .djr-notification-feed__filters::-webkit-scrollbar {
  display:none;
}

:where(html:not([data-owner-theme])) .djr-notification-feed__filters button {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:5px 10px;
  border:1px solid rgba(104,85,164,.13);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#68738a;
  font:inherit;
  font-size:.68rem;
  font-weight:850;
  cursor:pointer;
  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

:where(html:not([data-owner-theme])) .djr-notification-feed__filters button:hover {
  transform:translateY(-1px);
}

:where(html:not([data-owner-theme])) .djr-notification-feed__filters button.is-active,
:where(html:not([data-owner-theme])) .djr-notification-feed__filters button[aria-pressed="true"] {
  border-color:rgba(103,64,214,.26);
  background:
    linear-gradient(
      135deg,
      rgba(102,68,219,.13),
      rgba(40,127,235,.09)
    );
  color:#613dcc;
}

:where(html:not([data-owner-theme])) .djr-notify-filter-icon {
  display:grid;
  width:19px;
  height:19px;
  place-items:center;
  border-radius:6px;
  font-size:.67rem;
  font-weight:950;
}

:where(html:not([data-owner-theme])) .djr-notify-filter-icon svg {
  width:15px;
  height:15px;
}

:where(html:not([data-owner-theme])) .djr-notify-filter-icon--messenger {
  background:
    linear-gradient(
      145deg,
      #168ef8,
      #6e45e5
    );
  color:#fff;
  box-shadow:
    0 4px 10px
    rgba(62,94,220,.19);
}

:where(html:not([data-owner-theme])) .djr-notify-filter-icon--task {
  background:#e8f8f1;
  color:#18805f;
}

:where(html:not([data-owner-theme])) .djr-notify-filter-icon--mail {
  background:#fff0e6;
  color:#d76725;
}

:where(html:not([data-owner-theme])) .djr-notify-filter-icon--module {
  background:#f0eaff;
  color:#7043d5;
}

:where(html:not([data-owner-theme])) .djr-notify-filter-icon--all {
  background:#eef2f8;
  color:#67758c;
}


:where(html:not([data-owner-theme])) .djr-notification-item {
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 8px;
  gap:10px;
  align-items:start;
}

:where(html:not([data-owner-theme])) .djr-notification-item__source {
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:12px;
  background:#edf1f7;
  color:#69768b;
  font-size:.82rem;
  font-weight:950;
}

:where(html:not([data-owner-theme])) .djr-notification-item__source svg {
  width:21px;
  height:21px;
}

:where(html:not([data-owner-theme])) .djr-notification-item__source--messenger {
  background:
    linear-gradient(
      145deg,
      #168ef8,
      #7147e5
    );
  color:#fff;
  box-shadow:
    0 7px 16px
    rgba(55,89,217,.18);
}

:where(html:not([data-owner-theme])) .djr-notification-item__source--mail {
  background:#fff0e7;
  color:#d96725;
}

:where(html:not([data-owner-theme])) .djr-notification-item__source--task {
  background:#e9f8f2;
  color:#198061;
}

:where(html:not([data-owner-theme])) .djr-notification-item__source--module {
  background:#f0eaff;
  color:#7043d6;
}

:where(html:not([data-owner-theme])) .djr-notification-item__copy {
  display:grid;
  min-width:0;
  gap:3px;
}

:where(html:not([data-owner-theme])) .djr-notification-item__topline {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}

:where(html:not([data-owner-theme])) .djr-notification-item__topline strong {
  min-width:0;
  overflow:hidden;
  color:#202b43;
  font-size:.76rem;
  line-height:1.25;
  text-overflow:ellipsis;
}

:where(html:not([data-owner-theme])) .djr-notification-item__topline time {
  flex:0 0 auto;
  color:#9ca6b6;
  font-size:.54rem;
  white-space:nowrap;
}

:where(html:not([data-owner-theme])) .djr-notification-item__copy > small {
  overflow:hidden;
  color:#7c889b;
  font-size:.65rem;
  line-height:1.35;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

:where(html:not([data-owner-theme])) .djr-notification-item__channel {
  margin-top:2px;
  color:#9aa4b4;
  font-size:.54rem;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;
}

:where(html:not([data-owner-theme])) .djr-notification-item--messenger.is-unread {
  background:
    linear-gradient(
      90deg,
      rgba(31,132,246,.075),
      rgba(108,66,225,.045)
    );
}

:where(html:not([data-owner-theme])) .djr-notification-item__unread {
  align-self:center;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7045df;
}

:where(html:not([data-owner-theme])) .djr-notification-item--messenger
.djr-notification-item__unread {
  background:#1689f7;
  box-shadow:
    0 0 0 4px
    rgba(22,137,247,.09);
}


/* Narrow drawer / mobile */
@media(max-width:760px) {

  :where(html:not([data-owner-theme])) .djr-notification-feed__filters {
    padding-left:10px;
    padding-right:10px;
  }

  :where(html:not([data-owner-theme])) .djr-notification-feed__filters button {
    min-height:32px;
    padding:5px 9px;
    font-size:.64rem;
  }

  :where(html:not([data-owner-theme])) .djr-notification-item {
    grid-template-columns:35px minmax(0,1fr) 7px;
    gap:9px;
  }

  :where(html:not([data-owner-theme])) .djr-notification-item__source {
    width:34px;
    height:34px;
    border-radius:11px;
  }

}



/* ==========================================================
   DJR NOTIFICATION DRAWER SURGICAL POLISH V2
   Existing layout preserved.
   ========================================================== */

:where(html:not([data-owner-theme])) .djr-notification-feed {
  background:
    radial-gradient(circle at 15% 0%, rgba(119,82,230,.12), transparent 32%),
    radial-gradient(circle at 88% 100%, rgba(87,187,255,.12), transparent 34%),
    linear-gradient(145deg,#f8f8ff 0%,#eef6ff 48%,#f6efff 100%);
  box-shadow:
    0 28px 70px rgba(29,39,82,.18),
    inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

:where(html:not([data-owner-theme])) .djr-notification-feed__header {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.78),
      rgba(243,246,255,.62)
    );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

:where(html:not([data-owner-theme])) .djr-notification-feed__heading small {
  color:#7651df;
  letter-spacing:.16em;
}

:where(html:not([data-owner-theme])) .djr-notification-feed__header-actions button {
  border-radius:999px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(240,235,255,.72)
    );
  border:1px solid rgba(111,75,224,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 8px 20px rgba(80,65,160,.07);
}

:where(html:not([data-owner-theme])) .djr-notification-feed__filters {
  background:
    linear-gradient(
      135deg,
      rgba(244,239,255,.74),
      rgba(232,246,255,.72)
    );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

:where(html:not([data-owner-theme])) .djr-notification-feed__filters button {
  background:
    rgba(255,255,255,.55);
  border-color:
    rgba(106,74,214,.17);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78);
  transition:
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

:where(html:not([data-owner-theme])) .djr-notification-feed__filters button.is-active {
  background:
    linear-gradient(145deg,#7449e3,#5935d4);
  box-shadow:
    0 9px 22px rgba(92,57,207,.20),
    inset 0 1px 0 rgba(255,255,255,.20);
}

:where(html:not([data-owner-theme])) .djr-notification-item {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.92),
      rgba(250,251,255,.86)
    );
  border-color:
    rgba(112,78,218,.13);
  box-shadow:
    0 10px 28px rgba(56,68,110,.055),
    inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:where(html:not([data-owner-theme])) .djr-notification-item.is-unread {
  box-shadow:
    0 12px 30px rgba(56,68,110,.07),
    inset 4px 0 0 #7449e3,
    inset 0 1px 0 rgba(255,255,255,.85);
}

:where(html:not([data-owner-theme])) .djr-notification-item:hover {
  background:
    linear-gradient(
      145deg,
      #fff,
      #f7f5ff
    );
}

:where(html:not([data-owner-theme])) .djr-notification-feed__empty {
  background:
    rgba(255,255,255,.58);
  border:1px solid rgba(112,78,218,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82);
}

/* CT101 mobile dashboard cleanup: compact home-screen geometry shared by
   Owner and Staff. Service triggers stay accessible without a dots bubble. */
[data-djr-module-grid][data-layout-key="owner-dashboard"],
[data-djr-module-grid][data-layout-key="staff-dashboard"] {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap: 20px 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

[data-djr-module-grid][data-layout-key] > .djr-staff-module-card {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

[data-djr-module-grid][data-layout-key] > .djr-staff-module-card > .djr-app-service-trigger {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

[data-djr-module-grid][data-layout-key] > .djr-staff-module-card.is-dragging {
  z-index: 4;
  opacity: .62 !important;
  transform: scale(1.06) !important;
}

@media (max-width: 600px) {
  [data-djr-module-grid][data-layout-key="owner-dashboard"],
  [data-djr-module-grid][data-layout-key="staff-dashboard"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px 8px !important;
  }
  [data-djr-module-grid][data-layout-key] .djr-staff-module-card__icon { width: min(17vw, 68px) !important; }
  [data-djr-module-grid][data-layout-key] .djr-staff-module-card__body > strong { font-size: .60rem !important; }
}


/* Final compact dashboard pass against the currently served portal cascade. */
[data-djr-module-grid][data-layout-key="owner-dashboard"],
[data-djr-module-grid][data-layout-key="staff-dashboard"] {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
  gap: 18px 12px !important;
}

@media (max-width: 600px) {
  [data-djr-staff-modules] {
    gap: 8px !important;
    min-width: 0 !important;
    margin: 7px 0 12px !important;
  }
  [data-djr-staff-modules] .djr-staff-module-area__heading { gap: 8px !important; }
  [data-djr-staff-modules] .djr-staff-module-area__heading h2 { margin-top: 0 !important; font-size: 1rem !important; }
  [data-djr-staff-modules] .djr-staff-module-area__eyebrow,
  [data-djr-staff-modules] .djro-eyebrow { font-size: .56rem !important; }
  [data-djr-staff-modules] .djr-staff-module-area__controls { gap: 5px !important; }
  [data-djr-staff-modules] .djr-staff-module-add,
  [data-djr-staff-modules] .djr-owner-module-design-control,
  [data-djr-staff-modules] .djr-staff-module-area__count { width: 30px !important; min-width: 30px !important; height: 30px !important; }
  [data-djr-module-grid][data-layout-key="owner-dashboard"],
  [data-djr-module-grid][data-layout-key="staff-dashboard"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 6px !important;
  }
  [data-djr-module-grid][data-layout-key] .djr-staff-module-card__icon { width: min(15vw, 58px) !important; }
  [data-djr-module-grid][data-layout-key] .djr-staff-module-card__body { margin-top: 6px !important; }
  [data-djr-module-grid][data-layout-key] .djr-staff-module-card__body > strong { font-size: .57rem !important; line-height: 1.12 !important; }
  .djr-owner-app-library.djr-staff-module-area { padding-left: 10px !important; padding-right: 10px !important; }
}

:where(html:not([data-owner-theme])) .djr-notification-feed [hidden] { display: none !important; }