/* my-profile.page.scss */
.identity-card {
    border-radius: 20px;
    background: linear-gradient(135deg, var(--ion-color-primary) 0%, #93d9ff 100%);
    color: white;
  
    .card-header {
      display: flex;
      align-items: center;
      padding: 16px;
  
      .family-avatar {
        width: 80px;
        height: 80px;
        border: 3px solid rgba(255,255,255,0.2);
        margin-right: 16px;
      }
  
      .title-group {
        h1 {
          margin: 0;
          font-size: 1.5em;
        }
  
        ion-chip {
          margin-top: 8px;
          backdrop-filter: blur(5px);
          background: rgba(255,255,255,0.1);
        }
      }
    }
  
    .status-grid {
      background: rgba(255,255,255,0.1);
      border-radius: 15px;
      padding: 10px;
      margin: 16px;
  
      ion-col {
        text-align: center;
        padding: 10px;
  
        ion-icon {
          font-size: 32px;
          margin-bottom: 8px;
        }
  
        div {
          font-size: 0.9em;
          margin: 4px 0;
        }
  
        ion-badge {
          --padding-start: 8px;
          --padding-end: 8px;
          font-weight: bold;
        }
      }
    }
  }
  
  .dashboard-grid {
    ion-card {
      height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  
      ion-icon {
        font-size: 40px;
        margin-bottom: 12px;
      }
  
      h3 {
        margin: 8px 0;
        color: var(--ion-color-dark);
      }
  
      .value {
        font-size: 24px;
        font-weight: bold;
        margin: 8px 0;
      }
  
      &.time-bank {
        background: linear-gradient(45deg, #fff3e0 0%, #ffecb3 100%);
      }
  
      &.family-value {
        background: linear-gradient(45deg, #e8f5e9 0%, #c8e6c9 100%);
      }
    }
  }
  
  .quick-actions {
    background: transparent;
  
    ion-list-header {
      padding-left: 0;
      
      ion-label {
        font-size: 1.1em;
        font-weight: bold;
      }
    }
  
    ion-item {
      --border-radius: 12px;
      margin: 8px 0;
      --background: rgba(var(--ion-color-light-rgb), 0.8);
      backdrop-filter: blur(5px);
  
      ion-icon {
        margin-right: 16px;
      }
  
      ion-note {
        font-size: 0.9em;
      }
    }
  }