/* Source: https://github.com/TFH-Web/rock-frontend/blob/main/theme/Styles/v18/tfh-onboard-dashboards.css */
/* Converted from theme/Styles/onboard-dashboards.less for the Rock v18 RockV2 theme. */
/* Plain CSS: native nesting + custom properties. No compiler. */

/* ============================================================
   Rock v1 compatibility shim
   ------------------------------------------------------------
   These four custom properties come from the v1 Rock theme
   (Themes/Rock/Styles/_root.less). RockNextGen does not define
   them, so they are re-declared here, mapped onto v2 tokens so
   the wizard follows light/dark mode.  v1 literals in comments.
   ============================================================ */
.onboard-dashboards {
  --wizard-item-bar-color:  var(--color-interface-soft);     /* v1: #e6e6e6 */
  --wizard-item-icon-color: var(--color-interface-strong);   /* v1: #6a6c73 */
  --wizard-item-icon-bg:    var(--color-interface-softest);  /* v1: #ffffff */
  --panel-bg:               var(--color-interface-softest);  /* v1: #ffffff */
}


/*  ------------------------------------------- */
/*  Onboarding and Offboarding Dashboard Styles */
/*  ------------------------------------------- */


.onboard-dashboards {

    .team-member-info span {
        display: block;
    }
    .team-member-info .name {
        font-size: 21px;
        font-weight: 400;
    }
    .team-member-info .section-title {
        font-size: 14px;
        opacity: .6;
    }
    .task-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 35px;
        height: 35px;
        overflow: hidden;
        color: var(--wizard-item-icon-color);
        background: var(--wizard-item-icon-bg);
        border: 1px solid var(--wizard-item-bar-color);
        border-radius: 50%;
        box-shadow: 0 -4px 0 1px var(--panel-bg);
    }
    .task-list-line {
        position: relative;
    }
    .task-list-line::before {
        position: absolute;
        top: 0;
        left: 17px;
        width: 1px;
        height: 100%;
        content: "";
        background: var(--wizard-item-bar-color);
    }
    .task-item {
        position: relative;
    }
    .task-title {
        display: block;
        font-size: 20px;
        line-height: 1;
    }
    .task-date {
        display: block;
        font-size: 12px;
        opacity: .7;
    }
    .task-step {
        display: flex;
        column-gap: 5px;
        margin-top: 8px;
    }
    .task-step .icon {
        font-size: 18px;
        color: var(--wizard-item-bar-color);
    }
    .task-step .task-title {
        font-size: 18px;
        margin-top: 4px;
    }
    .task-assignee {
        display: block;
        font-size: 16px;
    }
    .task-notes {
        opacity: .7;
    }

}