/* Profile Info Card Styles */

.profile-info-card {
    display: flex;
    justify-content: flex-start;
    padding: 0.5rem;
}

/* Base tile sizing - all cards same size */
.element-tile, .gauge-tile {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: 2px solid;
    border-radius: 8px;
    background: white;
   /* gap: 4px;*/
    padding-top: 2px;
}

/* Type code (Nu, Pk, Co, Da) - matches texture card value style */
.tile-code {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    padding-top: 0.5rem;
}

/* Specific type code colors for gauge tiles */
.co-code { color: #4BA870; }
.da-code { color: #00A0DD; }

/* Gauge percentage display - matches texture card value style */
.gauge-percentage {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    color: #00A0DD;
}

.co-percentage {
    color: #4BA870;
    margin-top: -15px;
}

/* Nu tile - Green with gradient */
.nu-tile {
    border-color: #4BA870;
    background: linear-gradient(to top, rgba(75, 168, 112, 0.08) 0%, white 100%);
}
.nu-tile .tile-code,
.nu-tile .tile-percentage {
    color: #4BA870;
}

/* Pk tile - Blue with gradient, centered content */
.pk-tile {
    border-color: #00A0DD;
    background: linear-gradient(to top, rgba(0, 160, 221, 0.08) 0%, white 100%);
    justify-content: center;
}
.pk-tile .tile-code,
.pk-tile .tile-percentage {
    color: #00A0DD;
}

/* Co tile - Green with gradient */
.co-tile {
    border-color: #4BA870;
    background: linear-gradient(to top, rgba(75, 168, 112, 0.08) 0%, white 100%);
}

/* Da tile - Blue with gradient */
.da-tile {
    border-color: #00A0DD;
    background: linear-gradient(to top, rgba(0, 160, 221, 0.08) 0%, white 100%);
}

/* Syncfusion CircularGauge container */
.syncfusion-gauge-container {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* Tile percentage - matches texture card value style */
.tile-percentage {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* Default/fallback tile */
.default-tile {
    border-color: #6c757d;
    background: linear-gradient(to top, rgba(108, 117, 125, 0.08) 0%, white 100%);
}
.default-tile .tile-code,
.default-tile .tile-percentage {
    color: #6c757d;
}

/* Profile info card icon - positioned bottom right */
.profile-card-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 2.0rem;
    opacity: 0.35;
}

/* Make tiles position relative for absolute icon positioning */
.element-tile, .gauge-tile {
    position: relative;
}