@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        body,
        html {
          width: 100%;
          height: 100%;
          background: #317fe9;
          color: #ffffff;
          font-family: 'Inter';
          font-size: 22px;
          /* update path */
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 600px auto;
        }

        .stat-group {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .dashboard {
          display: flex;
          flex-direction: row;
          /* sidebar on the left, main on the right */
          height: 100vh;
          width: 100vw;
          overflow: hidden;
          /* prevent child overflow from breaking layout */
        }

        .top-row {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
          padding: 10px;
          flex: 0 0 auto;
        }

        .top-box {
          background: rgba(0, 0, 0, 0.18);
          border-radius: 8px;
          padding: 10px;
          display: flex;
          flex-direction: column;
          backdrop-filter: blur(5px);
          height: 100%;
          max-height: 50vh;
          overflow: scroll;
        }

        .bottom-box {
          flex: 1 1 auto;
          margin: 10px;
          margin-top: 0px;
          border-radius: 8px;
          padding: 0;
          overflow: hidden;
        }

        .carousel-wrapper {
          width: 100%;
          height: 100%;

          position: relative;
        }

        .carousel-track {
          display: flex;
          gap: 10px;
          will-change: transform;
          height: 100%;
        }

        .carousel-item {
          flex: 0 0 auto;
          /* fixed width based on calculation */
          width: calc((100% - 30px) / 4);
          /* keeps 4 items visible */
          height: 100%;
          display: flex;
          align-items: stretch;
          border-radius: 8px;
          justify-content: stretch;
        }

        .carousel-item .agent-card {
          width: 100%;
          flex: 1;
        }

        .stat-row {
          display: flex;
          justify-content: space-between;
          padding: 8px;
          font-weight: bold;
          color: rgb(255, 255, 255);
          background: rgba(0, 0, 0, 0.18);
          margin-top: 5px;
          font-size: 16px;
          border-radius: 8px;

        }

        .stat-row .label {
          text-transform: uppercase;

        }

        .flex-row {
          display: flex;
          justify-content: space-between;

        }

        .leaderboardbox {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 10px;
          overflow: hidden;
          justify-content: space-between;
        }

        .leaderboard-row {
          display: grid;
          grid-template-columns: 50px 1fr 200px;
          padding: 5px 0;
          border-radius: 8px;
          align-items: center;
          font-weight: bold;
          color: #ffffff;
          font-size: 24px;
          background: rgba(0, 0, 0, 0.18);

        }

        .leaderboard-row.header {
          text-transform: uppercase;
          font-size: 0.85em;
          opacity: 0.7;
          display: none;
        }

        .leaderboard-row .badge {
          text-align: center;
        }

        .leaderboard-row .name {
          padding-left: 10px;
          font-size: 22px;
        }

        .leaderboard-row .sales {
          text-align: right;
          padding-right: 10px;
          font-weight: normal;
        }

        .top-box canvas {
          width: 100%;
          flex: 1 1 auto;
          display: block;
        }


        .agent-card {
          background: rgba(0, 0, 0, 0.18);
          border-radius: 8px;
          padding: 15px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          /* push chart to bottom */
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
          height: 100%;
          backdrop-filter: blur(5px);
        }

        .canvas-wrapper {
          width: 100%;
          flex: 1 1 auto;
          /* allow canvas to grow */
          display: flex;
          align-items: center;
          justify-content: center;
        }



        .agent-card canvas {
          flex: 1 1 auto;
          /* allow chart to stretch */
          width: 100% !important;
          height: 100% !important;
        }

        .agent-photo-wrapper {
          width: 200px;
          height: 200px;
          border-radius: 50%;
          box-shadow: 0 0 13px rgba(57, 57, 57, 1);
          display: inline-block;
          margin-bottom: 10px;
        }

        .agent-photo {
          width: 200px;
          height: 200px;
          border-radius: 50%;
          object-fit: cover;

        }

        .agent-name {
          margin: 5px 0 10px;
          font-weight: 500;
          text-align: center;
          text-transform: uppercase;
          color: rgb(255, 255, 255);
        }

        .agent-stats {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .stat {
          display: flex;
          flex-direction: column;
        }

        .stat-label {
          font-size: 0.8em;
          color: #dbd8df;
          margin-bottom: 3px;
        }

        .stat-bar {
          width: 100%;
          height: 12px;
          background: #e0e0e0;
          border-radius: 6px;
          overflow: hidden;
        }

        .stat-fill {
          height: 100%;
          background: #1e90ff;
          border-radius: 6px 0 0 6px;
        }

        .left {
          flex: 0 0 30vw;
          /* fixed-width sidebar */
          display: flex;
          flex-direction: column;
          padding: 10px;
          gap: 10px;
          padding-right: 0px;
        }

        .right {
          flex: 1;
          /* take up remaining space */
          display: flex;
          flex-direction: column;
          min-width: 0;
          /* important for flex + overflow content */
        }

        .tb-wrapper {
          width: 100%;
          height: 100%;
          overflow: auto;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .row-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 14px;
          background: rgba(0, 0, 0, 0.18);
          border-radius: 8px;
          gap: 10px;
        }

        .row-text {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          /* enables text truncation */
        }

        .row-title {
          font-weight: 600;
          font-size: 18px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .row-subtitle {
          font-size: 14px;
          opacity: 0.8;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }



        .row-agent {
          flex: 0 0 auto;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          background: #1e90ff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 14px;
          color: white;
        }

        .scrolling-rows {
          overflow-y: auto;
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-top: 10px;
        }

        .totals {
          margin-bottom: auto;
          margin-top: auto;
        }

        .auto-scroll {
          overflow: auto;
          /* still scrollable */
          scrollbar-width: none;
          /* Firefox */
          -ms-overflow-style: none;
          /* IE / Edge legacy */
        }

        .auto-scroll::-webkit-scrollbar {
          display: none;
          /* Chrome, Safari */
        }