{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 360,
  "width": 330,
  "hideSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "style": {
      "position": "relative",
      "display": "flex",
      "flex-direction": "column",
      "align-items": "center",
      "height": "330px",
      "margin": "10px",
      "background-color": "#ffffff",
      "border": "1px solid #e2e8f0",
      "border-radius": "16px",
      "box-shadow": "0 5px 18px rgba(0,0,0,0.08)",
      "overflow": "hidden",
      "box-sizing": "border-box",
      "min-height": "250px",
      "padding-bottom": "25px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "top": "0",
          "left": "0",
          "width": "100%",
          "height": "130px"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "top": "20px",
          "left": "20px",
          "width": "34px",
          "height": "34px",
          "display": "flex",
          "align-items": "center",
          "justify-content": "center",
          "background-color": "#0f172a",
          "border-radius": "50%",
          "box-shadow": "0 2px 6px rgba(15,23,42,0.20)"
        },
        "children": [
          {
            "elmType": "span",
            "attributes": {
              "iconName": "Contact"
            },
            "style": {
              "font-size": "18px",
              "color": "#ffffff"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "defaultHoverField": "[$Name]",
        "style": {
          "position": "relative",
          "margin-top": "45px",
          "width": "112px",
          "height": "112px",
          "border-radius": "50%",
          "background-color": "#ffffff",
          "padding": "5px",
          "box-shadow": "0 4px 12px rgba(0,0,0,0.10)",
          "cursor": "pointer"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "=getUserImage([$Name.email], 'L')"
            },
            "style": {
              "width": "100%",
              "height": "100%",
              "border-radius": "50%",
              "object-fit": "cover"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "defaultHoverField": "[$Name]",
        "txtContent": "[$Name.title]",
        "style": {
          "margin-top": "14px",
          "padding": "0 15px",
          "font-size": "19px",
          "font-weight": "600",
          "color": "#1e293b",
          "text-align": "center",
          "cursor": "pointer",
          "white-space": "nowrap",
          "overflow": "hidden",
          "text-overflow": "ellipsis",
          "max-width": "285px"
        }
      },
      {
        "elmType": "div",
        "txtContent": "=if([$Role] != '', [$Role], [$Title])",
        "style": {
          "display": "=if([$Role] == '' && [$Title] == '', 'none', 'flex')",
          "align-items": "center",
          "justify-content": "center",
          "margin-top": "9px",
          "padding": "5px 14px",
          "background-color": "#f1f5f9",
          "color": "#334155",
          "border-radius": "20px",
          "font-size": "13px",
          "font-weight": "600"
        }
      },
      {
        "elmType": "div",
        "style": {
          "display": "=if([$Role] == '' && [$Title] == '', 'block', 'none')",
          "width": "32px",
          "height": "2px",
          "margin-top": "10px",
          "background-color": "#94a3b8",
          "border-radius": "2px"
        }
      },
      {
        "elmType": "div",
        "style": {
          "display": "=if([$Email] == '' && [$EMail] == '', 'none', 'block')",
          "margin-top": "14px",
          "padding": "0 16px",
          "color": "#475569",
          "font-size": "13px",
          "font-weight": "500",
          "text-align": "center",
          "line-height": "19px",
          "word-wrap": "break-word"
        },
        "children": [
          {
            "elmType": "span",
            "attributes": {
              "iconName": "Mail"
            },
            "style": {
              "font-size": "14px",
              "color": "#64748b",
              "margin-right": "6px",
              "position": "relative",
              "top": "2px"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=if([$Email] != '', [$Email], [$EMail])"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "=if([$Department] == '', 'none', 'block')",
          "margin-top": "8px",
          "padding": "0 16px",
          "color": "#475569",
          "font-size": "13px",
          "font-weight": "500",
          "text-align": "center",
          "line-height": "19px",
          "word-wrap": "break-word"
        },
        "children": [
          {
            "elmType": "span",
            "attributes": {
              "iconName": "Group"
            },
            "style": {
              "font-size": "14px",
              "color": "#64748b",
              "margin-right": "6px",
              "position": "relative",
              "top": "2px"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$Department]"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "bottom": "0",
          "left": "0",
          "width": "100%",
          "height": "4px"
        }
      }
    ]
  }
}