/* Home dashboard depth, hierarchy and compact Perforce operations centre. */
#content:has(.hubDashboard) > .hero,
.hubDashboard {
  width: min(1560px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

#content:has(.hubDashboard) > .hero {
  padding: 54px 0 38px;
}

#content:has(.hubDashboard) > .hero h1 {
  font-size: clamp(45px, 4.2vw, 68px);
  letter-spacing: -.025em;
}

.hubDashboard { gap: 30px; margin-bottom: 70px; }
.hubCards { gap: 18px; perspective: 1200px; }

.hubCard {
  --card-accent: #9aa79b;
  --card-accent-rgb: 154, 167, 155;
  position: relative;
  isolation: isolate;
  min-height: 292px;
  overflow: hidden;
  padding: 27px;
  border: 1px solid #303831;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(var(--card-accent-rgb), .075), transparent 42%),
    linear-gradient(160deg, #121814, #090d0a 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 2px 0 #050705,
    0 18px 44px rgba(0, 0, 0, .22);
  transform: translateZ(0);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.hubCard::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-accent), rgba(var(--card-accent-rgb), .08) 74%, transparent);
  box-shadow: 0 0 22px rgba(var(--card-accent-rgb), .22);
}

.hubCard::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -92px;
  right: -82px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--card-accent-rgb), .13), transparent 68%);
  opacity: .65;
  transition: opacity .22s ease, transform .22s ease;
}

.hubCardPoll { --card-accent: #d4ba61; --card-accent-rgb: 212, 186, 97; }
.hubCardLeave { --card-accent: #78a47f; --card-accent-rgb: 120, 164, 127; }
.hubCardProfile { --card-accent: #91a39a; --card-accent-rgb: 145, 163, 154; }
.hubCardRevenue { --card-accent: #b89a69; --card-accent-rgb: 184, 154, 105; }
.workHubCard { --card-accent: #73aa83; --card-accent-rgb: 115, 170, 131; }
#meetingRequestCard { --card-accent: #8296b8; --card-accent-rgb: 130, 150, 184; }

.hubCard:is(button,[role="button"]):hover,
.hubCard:is(button,[role="button"]):focus-visible {
  border-color: rgba(var(--card-accent-rgb), .72);
  background:
    linear-gradient(145deg, rgba(var(--card-accent-rgb), .12), transparent 46%),
    linear-gradient(160deg, #151c17, #0a0f0b 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 5px 0 #060806,
    0 28px 58px rgba(0, 0, 0, .38),
    0 0 28px rgba(var(--card-accent-rgb), .07);
  transform: translateY(-7px) translateZ(18px);
  outline: none;
}

.hubCard:is(button,[role="button"]):hover::after,
.hubCard:is(button,[role="button"]):focus-visible::after { opacity: 1; transform: scale(1.08); }

.hubCard .hubIcon {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  border: 1px solid rgba(var(--card-accent-rgb), .48);
  border-radius: 13px;
  background: rgba(var(--card-accent-rgb), .09);
  color: var(--card-accent);
  box-shadow: inset 0 0 18px rgba(var(--card-accent-rgb), .04);
  font-size: 18px;
}

.hubCard > small {
  min-height: 25px;
  border-color: rgba(var(--card-accent-rgb), .35);
  border-radius: 6px;
  background: rgba(var(--card-accent-rgb), .1);
  color: var(--card-accent);
}

.hubCard h2 { margin: 13px 0 9px; font-size: 29px; }
.hubCard p { max-width: 34ch; color: #929b93; font-size: 12px; }
.hubCard > b {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d9dfd7;
  font-size: 10px;
  letter-spacing: .025em;
}

.hubCard > b::after { content: ""; width: 28px; height: 1px; background: var(--card-accent); opacity: .65; transition: width .2s; }
.hubCard:is(button,[role="button"]):hover > b::after { width: 42px; }
.hubCard.urgent { border-top-width: 1px; }

.hubLeaveNow,
.homeUpcoming,
.hubOneToOneCenter,
.hubAdminAttention {
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .15);
}

.hubLeaveNow.hubAvailability {
  display: block;
  padding: 0;
  border: 1px solid #354038;
  background: #0e1410;
  box-shadow: none;
}

.hubLeaveNow.hubAvailability.hasAway { border-color: #4b3934; background: #131411; }
.hubAvailabilityHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid #2c342d;
}
.hubAvailability.hasAway .hubAvailabilityHeader { border-color: #332f29; }
.hubAvailability .hubAvailabilityHeader h2 {
  margin: 0;
  color: #e2e7de;
  font: 600 16px/1.4 'DM Sans', sans-serif;
}
.hubAvailabilityCalendar {
  display: inline-flex;
  min-height: 44px;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 12px;
  border: 0;
  background: transparent;
  color: #b9c6b8;
  font: 600 12px/1.4 'DM Sans', sans-serif;
  cursor: pointer;
  transition: color .18s ease;
}
.hubAvailability svg { width: 18px; height: 18px; flex-shrink: 0; }
.hubAvailabilityCalendar:hover { color: #f0f4eb; }
.hubAvailabilityBody {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  gap: 32px;
  align-items: start;
  padding: 24px 28px;
}
.hubAvailabilitySummary { min-width: 0; }
.hubAvailabilityToday {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b9c6b8;
  font-size: 12px;
  font-weight: 600;
}
.hubAvailabilityToday i { width: 7px; height: 7px; border-radius: 50%; background: #93b698; }
.hasAway .hubAvailabilityToday { color: #e1b3a6; }
.hasAway .hubAvailabilityToday i { background: #d8927f; }
.hubAvailabilitySummary h3 {
  max-width: 24ch;
  margin: 8px 0;
  color: #f0e9de;
  font: 600 26px/1.15 'Cormorant Garamond', serif;
  text-wrap: balance;
}
.hubAvailabilitySummary p { max-width: 32ch; margin: 0; color: #a9afa4; font-size: 12px; line-height: 1.6; }
.hubAvailabilityPeople { min-width: 0; }
.hubAwayList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hubAwayPerson {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.hubAwayPerson:nth-child(n+3) { border-top: 1px solid #332f29; }
.hubAwayPerson .hubAwayAvatar {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #4c5142;
  border-radius: 50%;
  object-fit: cover;
  background: #24291f;
  color: #d9dfce;
  font-size: 14px;
  font-weight: 600;
}
.hubAwayPerson > div { min-width: 0; }
.hubAwayPerson b { display: block; color: #e3e7de; font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.hubAwayPerson div > span { display: block; margin-top: 2px; color: #b9afa2; font-size: 12px; line-height: 1.5; }
.hubAwayPerson time { font-variant-numeric: tabular-nums; }
.hubAwayMore { margin-top: 8px; border-top: 1px solid #332f29; }
.hubAwayMore summary {
  display: flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: #d7c2ae;
  font-size: 12px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.hubAwayMore summary::-webkit-details-marker { display: none; }
.hubAwayMore summary:hover { color: #fff0dc; }
.hubAwayMore .hubAwayMoreOpen,
.hubAwayMore[open] .hubAwayMoreClosed { display: none; }
.hubAwayMore[open] .hubAwayMoreOpen { display: inline; }
.hubAwayMore summary svg { transition: transform .18s ease; }
.hubAwayMore[open] summary svg { transform: rotate(180deg); }
.hubAwayOverflow { max-height: 260px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-color: #776552 #131411; scrollbar-width: thin; }
.hubAvailability :is(button,summary,.hubAwayOverflow):focus-visible { outline: 2px solid #c7b78f; outline-offset: 4px; border-radius: 4px; }
.hubAvailability.isAvailable .hubAvailabilityBody { grid-template-columns: 1fr; }
.hubAvailability.isAvailable .hubAvailabilitySummary h3,
.hubAvailability.isAvailable .hubAvailabilitySummary p { max-width: none; }

@media (max-width: 1000px) {
  .hubAvailabilityBody { grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: 24px; }
  .hubAwayList { grid-template-columns: 1fr; }
  .hubAwayPerson:nth-child(n+2) { border-top: 1px solid #332f29; }
}
@media (max-width: 700px) {
  .hubAvailabilityHeader { align-items: flex-start; padding: 12px 20px; gap: 12px; }
  .hubAvailability .hubAvailabilityHeader h2 { max-width: 14ch; align-self: center; font-size: 15px; }
  .hubAvailabilityCalendar { font-size: 11px; gap: 6px; padding-left: 0; }
  .hubAvailabilityBody { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .hubAvailabilitySummary h3 { max-width: none; font-size: 24px; }
  .hubAvailabilitySummary p { max-width: none; }
  .hubAwayPerson { padding: 12px 0; }
  .hubAwayPerson:first-child { padding-top: 0; }
  .hubAwayOverflow .hubAwayPerson:first-child { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hubAvailabilityCalendar,
  .hubAwayMore summary svg { transition: none; }
}

.homeUpcoming {
  min-height: 155px;
  border-color: #303831;
  border-radius: 14px;
  background: linear-gradient(145deg, #0f1410, #0a0e0b);
}

.homeUpcomingList > p {
  display: flex;
  min-height: 74px;
  align-items: center;
  padding: 18px 20px;
  border: 1px dashed #364038;
  border-radius: 9px;
  background: rgba(255, 255, 255, .012);
}

.homeUpcomingItem { border-radius: 10px; }

.integrationQueue {
  margin-top: 4px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #344039;
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% -20%, rgba(119, 157, 127, .12), transparent 34%),
    linear-gradient(145deg, #0e1410, #090d0a 70%);
  box-shadow: 0 24px 58px rgba(0, 0, 0, .22);
}

.integrationQueueTop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
}

.integrationQueueHeading { margin: 0; }
.integrationQueueHeading h2 { margin: 5px 0 7px; font-size: 34px; }
.integrationQueueHeading > p:last-child { max-width: 660px; margin: 0; line-height: 1.55; }

.integrationQueueMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 8px;
}

.integrationQueueMetrics span {
  display: grid;
  min-width: 104px;
  padding: 12px 13px;
  border: 1px solid #303a32;
  border-radius: 9px;
  background: rgba(18, 25, 20, .88);
}

.integrationQueueMetrics b { color: #e4e9e2; font: 600 22px/1 'Cormorant Garamond', serif; }
.integrationQueueMetrics small { margin-top: 5px; color: #78827a; font-size: 8px; font-weight: 800; letter-spacing: .1em; }

.integrationQueue .integrationWorkflowGuide {
  display: grid;
  gap: 10px;
  margin: 24px 0 18px;
}

.integrationQueue .integrationWorkflowIntro h3 {
  color: #e4e9e2;
  font: 600 18px/1.2 'Cormorant Garamond', serif;
}

.integrationQueue .integrationWorkflowIntro p {
  max-width: 760px;
  color: #8d978f;
  font-size: 10px;
}

.integrationQueue .integrationWorkflow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2e3931;
  border-radius: 11px;
  background: #0c110d;
}

.integrationQueue .integrationWorkflow span {
  position: relative;
  min-height: 68px;
  padding: 14px 18px;
  color: #aeb7af;
  font-size: 10px;
  line-height: 1.35;
}

.integrationQueue .integrationWorkflow span + i + span { border-left: 1px solid #2e3931; }
.integrationQueue .integrationWorkflow b {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #526055;
  background: #1b251d;
  color: #d8e1d8;
}
.integrationQueue .integrationWorkflow i { display: none; }

.integrationQueueList { gap: 12px; }
.integrationQueueCard {
  padding: 20px;
  border-radius: 11px;
  background: #101612;
  box-shadow: 0 9px 26px rgba(0, 0, 0, .14);
}

.integrationQueueEmpty {
  display: flex;
  min-height: 92px;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px dashed #3b493e;
  border-radius: 11px;
  background: rgba(18, 25, 20, .7);
  color: #939e95;
}

.integrationQueueEmpty > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid #4e6753;
  border-radius: 50%;
  background: #172219;
  color: #88b08e;
  font-weight: 800;
}

.integrationQueueEmpty b { color: #d9e0d9; font: 600 20px 'Cormorant Garamond', serif; }
.integrationQueueEmpty p { margin: 3px 0 0; font-size: 11px; }

@media (max-width: 1180px) {
  .hubCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integrationQueueTop { grid-template-columns: 1fr; }
  .integrationQueueMetrics { width: min(100%, 430px); }
}

@media (max-width: 760px) {
  #content:has(.hubDashboard) > .hero,
  .hubDashboard { width: calc(100% - 28px); }
  #content:has(.hubDashboard) > .hero { padding: 35px 0 26px; }
  .hubDashboard { gap: 20px; }
  .hubCards { grid-template-columns: 1fr; }
  .hubCard { min-height: 230px; padding: 22px; }
  .hubCard:is(button,[role="button"]):hover,
  .hubCard:is(button,[role="button"]):focus-visible { transform: translateY(-3px); }
  .hubLeaveNow { padding: 21px; }
  .integrationQueue { padding: 21px 17px; }
  .integrationQueueMetrics { grid-template-columns: 1fr; width: 100%; }
  .integrationQueueMetrics span { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
  .integrationQueueMetrics small { margin: 0; }
  .integrationQueue .integrationWorkflow { grid-template-columns: 1fr; }
  .integrationQueue .integrationWorkflow span + i + span { border-top: 1px solid #2e3931; border-left: 0; }
  .integrationQueueCard { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .hubCard,
  .hubCard::after,
  .hubCard > b::after { transition: none; }
}